javascript - 'bind to click event' 范围的解释

Question

我有this问题，但简而言之:我有一个自调用函数 (function TCC() {...})(); ，它生成两部分元素等。这些元素是使用 btn 类生成的。 $('.btn').click(function () {...}; [带有适当的 console.log() ] 的另一个 JQuery 函数显示页面上具有 class 的所有元素除了上述两个部分的元素之外，btn 都被点击。

一条评论建议“出现此问题是因为您在“列按钮生成器”循环之前绑定(bind)了单击事件。”，以及建议的解决方案:

$.each(cols, function(i) {...}).done(function(){ //Add click event handler now });

第一个问题是有人可以详细说明“因为您在“列按钮生成器”循环之前绑定(bind)了点击事件。”

第二个问题是关于建议的解决方案。由于我有两行单独的代码用于生成，并且 $('btn').on('click', function() {...}); block 超过 50 行，如何确实要在不重复代码行的情况下实现解决方案，因为我假设 .done() 方法需要这样做。有问题的页面是 here 。

• 当前生成代码相对于 .on('click') 的作用域结构如下(抱歉没有图片，但 StackOverflow 由于某种原因不喜欢这种格式):

  

代码生成行的范围是否会影响这一点？如果是，我可以将它们从自调用函数中取出来修复建议中提到的“绑定(bind)到单击事件”吗？

我感谢您的帮助和专业知识，因为从头开始学习编程，这些类型的结构类(class)经常被排除在教科书中经常包含的在线学习工具之外。

Answer 1

您确实应该发布实际的代码。但是不要紧。我认为您的 click 事件未被调用的唯一问题是您使用了不正确的语法。

on function jQuery 的，具有以下语法 -

HTML

<div class='button_container'>
    <button> This is a button</button>
    <button> This is a button</button>
</div>

JavaScript

$('.button_container').on('click', 'button', function(){
    console.log('I have been clicked!');
});
//Note the the second selector 'button' within the declaration

由于 on 函数基本上取代了 live 和 delegate 函数，因此现在为 div 中的所有按钮定义了处理程序。按钮，无论它是何时以及如何创建的(意味着动态创建)。这可能有点误导。

如果您进行简单的排序选择

$('button').on('click', function(){ /* do something **/ })

jQuery 假设您正在谈论直接事件绑定(bind) - 即 dom 元素已经加载。它不会影响任何动态创建的元素(请注意，如果您在创建代码之后附加绑定(bind)，它仍然适用于这些元素，因为它们已经存在于 DOM 中)。

除非您提供第二个选择器，否则这是默认行为。这有点令人困惑，但继续前进。如果您想在实际创建这些元素之前定位这些元素，请执行此类操作

//Right syntax
$(document).on('click','button', function(){ /* do something **/ })
//This will bind to all buttons