0

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

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

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

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

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

  • 生成代码相对于的当前作用域结构.on('click')如下（对不起，图片，但 StackOverflow 出于某种原因不喜欢这种格式）：

    在此处输入图像描述

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

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

4

1 回答 1

3

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

jQuery的on 函数，语法如下：

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函数基本上替换了liveanddelegate函数，因此现在为 中的所有按钮定义了处理程序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
于 2012-08-01T10:02:05.690 回答