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

简介: 点击div显示下拉框,然后下拉框中的点击事件不生效。

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

以下是修改后的代码:

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

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

相关文章
|
4月前
|
前端开发
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
50 0
|
4月前
解决点击button按钮会刷新页面的问题
解决点击button按钮会刷新页面的问题
22 0
|
29天前
下拉框
下拉框。
7 1
|
4月前
|
前端开发 JavaScript 数据安全/隐私保护
前端点击其他输入框的时候,对当上个输入框进行判断(鼠标移出输入框事件,和鼠标点击其他输入框触发事件)
前端点击其他输入框的时候,对当上个输入框进行判断(鼠标移出输入框事件,和鼠标点击其他输入框触发事件)
44 0
|
6月前
点击按钮,新增输入框,再点击按钮,删除输入框
点击按钮,新增输入框,再点击按钮,删除输入框
27 0
|
6月前
|
前端开发
uniapp checkbox样式失效,选中框选中按钮不显示
uniapp checkbox样式失效,选中框选中按钮不显示
85 0
|
8月前
|
JavaScript
vue点击取消再点击选中(单选)
vue点击取消再点击选中(单选)
|
11月前
|
算法 前端开发
下拉选择框
下拉选择框
68 1
Vant3——复选框点击其他后格外出现一个输入框
复选框点击其他后格外出现一个输入框
155 0
|
存储 关系型数据库 MySQL
Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
348 0