将Jquery事件分配给动态按钮的最佳方法
我正在基于用户操作动态生成twitter引导模态(长篇大论)。假设有时候用户可以在他的屏幕上看到100个模态。在每个模式中，我都有5个动态按钮，每个按钮都有自己的用途，并且在所有模式中都是一样的，并且有不同的id。
每当有一个新的twitter模式打开时，我就会使用jquery将onClick事件附加到这些按钮上，如下所示
$(document).on("click","#btn"+btnNumber, function(){
//Code Goes Gere
});因此，如果我打开100个通道，每个通道都有5个按钮，那么将点击事件分配500次是不是一个好主意？
或者，通过使用单击事件的name属性指定单击事件1次，如下所示
$(document).ready(function(){
$(document).on("click","btnNameAttr", function(){
//Code Goes Gere
});
});
回答 3
Stack Overflow用户
发布于 2014-02-26 19:58:09
()上的jQuery可以在这方面为您提供帮助。首先，您需要分离附加到元素ID的数据，如btn+btnNumber。您可以在任何data-x属性(如data-custom-info )中添加自定义信息，并使用jQuery attr('data-custom-info')语法检索信息。使用on()方法注册的事件处理程序也可用于将来的元素(在脚本执行后创建的元素)。如下所示。
创建新按钮时，添加将其渲染为..
<input .... class="btnWithData" data-custom-info="1" ... />
<input .... class="btnWithData" data-custom-info="2" ... /> 你的事件处理程序是这样的..
$(document).ready(function(){
$('body').on('click','.btnWithData',function(){
//DO WHATEVER
var buttonData=$(this).attr('data-custom-info');
//DO WHATEVER
});
});Stack Overflow用户
发布于 2014-02-26 20:01:56
最好不要使用闭包，它们需要内存。取而代之的是依赖好的旧数据标记：
$(document).ready(function () {
$("#wrapper").on("click", "btnNameAttr", function () {
var n;
n = $(this).data("number");
// code goes here
});
});要区分#wrapper中实际单击的元素，可以使用data-number属性，如下所示：
<div id="wrapper">
<img data-number="000" />
<img data-number="001" />
<img data-number="002" />
<img data-number="003" />
</div>通过使用包装<div>元素和data-number=""属性，这段代码将执行得更好，并且您仍然可以拥有您想要的所有功能。而且不会影响可能已经存在于这些元素上的class或id属性。
您甚至可以将命令添加到标记中：
<img data-number="000" data-command="edit" />
<img data-number="000" data-command="show" />
<img data-number="000" data-command="delete" />然后打开它：
switch ($(this).data("command"))
{
case "edit":
// edit element with number n here
break;
}Stack Overflow用户
发布于 2014-02-26 20:03:50
您应该像@Ananthan-Unni建议的那样，使用jQuery.on()方法分配委托事件侦听器，但格式如下：
$.on('click', 'button', listener) 在这种情况下，您不需要分配唯一的ids或属性。您可以使用标记名或类名作为选择器(第二个参数)。
请看这里：https://api.jquery.com/on/，并阅读delegated events。
https://stackoverflow.com/questions/22051813
复制
腾讯云开发者
