元素事件监听：避免ID重复，使用类选择器实现高效绑定

上周，我遇到了一个项目，其中使用 jQuery 绑定事件时会重用 ID。
当我看到事实并非如此时，我很快就适应了。
要知道，在HTML规范中，ID必须是唯一的，如果重复就会出现问题。

老兄，他们以前的代码是这样的，使用重复的ID：
  • 列表1
  • 列表2 <脚本> $('标题').on('点击', function(){ console.log("点击"); }); </脚本>
    你看，$('Title')这里只选择了第一个 元素，后面的 不会触发点击事件。

    然后我建议他们使用类选择器而不是ID，这样它们就可以都保存在同一个类中。
    他们做到了，而且成功了：
  • 列表1
  • 列表2 <脚本> $('.Title').on('点击', function(){ console.log("点击列表："+$(this).text()); }); </脚本>
    对了，还推进了另一个优化，就是委托。
    适用于动态添加的元素，例如通过 AJAX 加载的索引项。
    我将此部分添加到他们的代码中：
    <脚本> $('listContainer').on('点击','.Title', function(){ console.log("点击动态项："+$(this).text()); }); </脚本>
    这样，只要在父元素中添加新的 .Title 类型，结果就会自动继承。

    我感到很高兴。
    关键是要注意ID的唯一性，根据元素的功能来选择ID或者类，这样才能写出更高效稳定的代码。
    正如您所看到的，这些原则非常有用。

    jquery 动态添加节点怎么绑定事件

    说白了，使用事件委托绑定对象是Query中最实用的技术之一，尤其是对于动态元素。
    这个东西细节上很复杂，但核心是两步过程：找到父静态容器，然后在子监听方法中使用结果元素。

    让我们谈谈第一件非常重要的事情。
    .list 托管父容器。
    .find('a') 是查找子元素。
    然而，当使用 in() 时，直接编写 .on('click', 'a', function() {...}) 会更高效，因为 jQuery 会自动过滤目标事件以避免垃圾邮件到非 a 标签。
    我们今年运行并使用此方法处理了 3 ,000 多个列表。
    动态添加的标签在几秒钟内响应，完全没有延迟。
    另一点是 $(this).addClass('active') 代码行是关键。
    这表明使用事件的元素能够准确地执行。
    另一个是决定性的。
    请记住使用 .siblings() 清除其他 .actives。
    否则，每次点击时类名都会累积。
    说实话，这很令人不安。

    我一开始以为用.click方法直接就可以了，后来发现我错了，因为动态添加的元素还没有绑定到事件上，不会为null。
    等等，还有别的事。
    如果.list是 ，但子元素可以在 中，那么使用.on('click', 'a', function() {...})效果最好。
    直接编写 .on('click', function() {...}) 将触发错误本身。
    很多人不注意这一点。
    建议今后为案件委托提供动态列表。
    他正在寻找一个特定的价格。

    动态添加元素后事件失效了？如何解决？

    动态添加元素事件失败。
    原因可能是绑定时间错误、第三方库未初始化或者代码逻辑错误。
    解决这个问题的方法有以下三种： 1 . 将事件委托绑定到静态父元素，以高效处理多个动态元素。
    2 .添加元素后手动绑定事件。
    3 .检查第三方库的初始化。
    调试时，检查 DOM、事件目标和错误日志，并调试父元素、事件类型和样式的问题。