这个问题的根本原因是在动态生成的元素上绑定了点击事件,导致点击事件无法触发。解决这个问题的方法是使用事件委托,将点击事件绑定在父级元素上,然后通过事件冒泡机制,捕获到被点击的子元素。
以下是修改后的代码:
let str = ""; for (let i = 0; i < hso.list.length; i++) { if (hso.list[i].pid === 0) { str += ` <div class="item-title"> <img src="./img/down.png" class="down-thi" alt="" /> ${hso.list[i].title} </div>`; } else if (hso.list[i].pid === 1 || hso.list[i].pid === 5 || hso.list[i].pid === 9 || hso.list[i].pid === 13) { str += ` <div class="item-child">${hso.list[i].title}</div> `; } } $(".item").html(str); // 显示二级档级 $(".item").on("click", ".item-title", function() { let isRotated = $(this).hasClass("rotated"); // 切换下拉按钮的样式 if (!isRotated) { $(this).addClass("rotated"); } else { $(this).removeClass("rotated"); } // 切换二级档级显示/隐藏 $(this).find(".item-child").toggle(); });
修改后的代码首先移除了原来在<div class="item-title">
中直接绑定的onclick="isTitle()"
事件。然后使用了$(".item").on("click", ".item-title", function() {})
来给.item-title
元素绑定点击事件。
在点击事件中,通过$(this)
来获取被点击的.item-title
元素,然后使用.hasClass("rotated")
方法判断该元素是否已经有了rotated
类。如果没有该类,则表示下拉框是隐藏的,需要显示;如果已经有了该类,则表示下拉框是显示的,需要隐藏。
最后,使用.addClass("rotated")
和.removeClass("rotated")
方法来切换下拉按钮的样式,使用.find(".item-child")
方法来找到对应的二级档级元素,并使用.toggle()
方法来切换它的显示/隐藏状态。
通过这样的事件委托方式,即使是动态生成的元素也能够正确地绑定事件,从而解决了点击事件无法触发的问题。