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

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

相关文章
|
7月前
|
前端开发
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
184 0
|
7月前
基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行
基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行
|
7月前
|
JavaScript API
Element Plus组件库中的input组件如何点击查看按钮时不可编辑,点击编辑时可编辑使用setup
Element Plus组件库中的input组件如何点击查看按钮时不可编辑,点击编辑时可编辑使用setup
160 0
点击按钮,新增输入框,再点击按钮,删除输入框
点击按钮,新增输入框,再点击按钮,删除输入框
58 0
|
前端开发
uniapp checkbox样式失效,选中框选中按钮不显示
uniapp checkbox样式失效,选中框选中按钮不显示
326 0
|
JavaScript 前端开发
49EasyUI 窗口- 自定义带有工具条和按钮的对话框
49EasyUI 窗口- 自定义带有工具条和按钮的对话框
48 0
element-plus 下拉框实现全选功能
element-plus 下拉框实现全选功能
1468 0
|
JavaScript
vue点击取消再点击选中(单选)
vue点击取消再点击选中(单选)
|
Web App开发 JavaScript 前端开发
对话框、模态框和弹出框看起来很相似,它们有何不同?
由于一个新的 popover 属性正在被提出,所以这篇文章将探讨对话框(dialogs)、弹出窗口(popovers)、叠加层(overlays)和揭示小部件(disclosure widgets)之间的区别。
26392 1

热门文章

最新文章