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

Question

我正在根据用户操作动态生成 Twitter Bootstrap 模式(长话短说)。假设有时用户可以在屏幕上看到 100 个模态框。在每个模态中，我都有 5 个动态按钮，每个按钮都有自己的用途，并且在所有模态中执行相同的操作，并且具有不同的 id。

当有一个新的 Twitter 模式打开时，我会使用 jquery 将 onClick 事件附加到这些按钮，如下所示

$(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() 可以在这方面为您提供帮助。首先，您需要分离附加到元素 ID 的数据，例如 btn+btnNumber。您可以在任何 data-x 属性(例如 data-custom-info)中添加自定义信息，并使用 jQuery attr('data-custom-info') 语法来检索信息。使用 on() 方法注册的事件处理程序也可用于 future 的元素(脚本执行后创建的元素)。就像下面这样。

创建新按钮时，将其渲染为..

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