点击div显示下拉框，然后下拉框中的点击事件不生效。

Question

点击div显示下拉框，然后下拉框中的点击事件不生效。

成功时应该是这样的效果

    let str = "";
            for (let i = 0; i < hso.list.length; i++) {
                if (hso.list[i].pid == 0) {
                    str += `
            <div class="item-title" onclick="isTitle()">
                <img src="./img/down.png" class="down-thi" alt="" />
                ${hso.list[i].title}
            </div>
        `
                } else if (hso.list[i].pid == 1) {
                    str += `
                        <div class="item-child">${hso.list[i].title}</div>
                    `
                } else if (hso.list[i].pid == 5) {
                    str += `
                        <div class="item-child">${hso.list[i].title}</div>
                    `
                } else if (hso.list[i].pid == 9) {
                    str += `
                        <div class="item-child">${hso.list[i].title}</div>
                    `
                } else if (hso.list[i].pid == 13) {
                    str += `
                        <div class="item-child">${hso.list[i].title}</div>
                    `
                }
            }
            $(".item").html(str)
        }
    })
}
// 显示二级档级
function isTitle() {
    if (!isRotated) {
        $(".item-child").show()
        isRotated = true;
    } else {
        $(".item-child").hide()
        isRotated = false;
    }
}

Answer 1

【以下回答由 GPT 生成】

这个问题的根本原因是在动态生成的元素上绑定了点击事件，导致点击事件无法触发。解决这个问题的方法是使用事件委托，将点击事件绑定在父级元素上，然后通过事件冒泡机制，捕获到被点击的子元素。

以下是修改后的代码：

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()方法来切换它的显示/隐藏状态。

通过这样的事件委托方式，即使是动态生成的元素也能够正确地绑定事件，从而解决了点击事件无法触发的问题。

【相关推荐】

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7621829
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：从一个div向另一个div里面追加自己的元素
• 除此之外, 这篇博客: 前端html网页，点击按钮或超链接 弹出 一个登陆的div窗口或者对话框中的 1.点击链接弹出一个可操作的div窗口代码效果图展示： 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^