Question

我根据用户操作（Long Story）动态生成twitter bootstrap模式。让我们说有时用户可以在他的屏幕上看到100个模态。在每个模态中，我有5个动态按钮，每个按钮都有自己的用途，并且在所有模态中都有相同的功能，并且具有不同的ID。

我通过使用jquery将onClick事件附加到这些按钮，当有新的twitter模式打开时，使用按钮ID，如下所示

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

所以，如果我打开100个模态，每个都有5个按钮，最好分配点击事件500次吗？

或者好的想法是通过使用它的名称属性一次分配点击事件，如下所示

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

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

Answer 3

您应该使用jQuery.on()方法指定委派的事件监听器，如@ Ananthan-Unni建议的那样，但是在表单中：

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

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

在这里查看：https://api.jquery.com/on/并阅读委派活动。

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

3 个答案: