将 Jquery 事件分配给动态按钮的最佳方法

Question

我正在根据用户操作动态生成Twitter引导模式（长话短说）。假设有时用户可以在他的屏幕上看到 100 个模态。在每个模态中，我都有 5 个动态按钮，每个按钮都有自己的用途，并且在所有模态中都做同样的事情，并且有不同的 id。

当有新的推特模式打开时，我正在使用jquery将onClick事件附加到这些按钮，如下所示

$(document).on("click","#btn"+btnNumber, function(){
   //Code Goes Gere
});

因此，如果我打开 100 个模态，

每个模态有 5 个按钮，分配 500 次点击事件是个好主意吗？

或者是否最好使用其名称属性分配点击事件 1 次，如下所示

$(document).ready(function(){
    $(document).on("click","btnNameAttr", function(){
       //Code Goes Gere
    });
});

Answer 1

jQuery on（） 可以在这方面为您提供帮助。首先，您需要分离将 DATA 附加到元素 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
 });
});

<</div> div class="one_answers">

您应该按照 @Ananthan-Unni 的建议使用jQuery.on()方法分配委托的事件侦听器，但形式如下：

$.on('click', 'button', listener)    

在这种情况下，您无需分配唯一 ID 或属性。您可以使用标签名称或类名作为选择器（第二个参数）。

请看这里：https://api.jquery.com/on/并阅读委托事件。

Answer 2

最好不要使用它们需要内存的闭包。相反，依靠良好的旧数据标签：

$(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;
}