使用作用域进行“绑定到click事件”的说明

Question

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

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

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

第一个问题是有人可以详细说明'因为你在“列按钮生成器”循环之前绑定了click事件。'

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

• 生成代码相对于.on('click')的当前范围结构如下（对不起pic，但StackOverflow由于某种原因不喜欢格式化）：

  

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

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

Answer 1

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

jQuery的on function具有以下语法 -

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.buttons中的所有按钮定义了处理程序，而不管其创建的时间和方式如何（意思是动态创建）。这可能有点误导。

如果您只是简单地选择排序

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

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

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

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