运行时生成元素时的 JQuery 处理事件答案

【问题标题】：JQuery Handling events when elements are being generated at run time运行时生成元素时的 JQuery 处理事件
【发布时间】：2014-07-02 11:56:36
【问题描述】：

免责声明：我是 JQuery 新手

我不知道如何命名这个问题，但首先我的代码如下

$(document).on("click" ,'[id^="picChangeAddress"]', function() {
    $('div[id^="divAddressSet"]').toggle();
});

请注意我的 div 和 checkboexes 的数量相同，每个名称格式也相同，例如复选框 picChangeAddress1, picChangeAddress2 等，div 的 divAddressSet1, divAddressSet2 等等。

我使用了上面的代码，因为这些 id 是在运行时生成的。当我点击一个复选框时，我需要先问几件事，它会影响页面上的每个 div div[id^="divAddressSet"]，当我点击任何[id^="picChangeAddress"] 复选框时，它们都会切换。我希望你能帮助我一次只显示或隐藏一个 div。

有什么想法吗？

【问题讨论】：

标签： javascript php jquery html loops

【解决方案1】：

你可以从 ID 中提取数字，然后你可以使用 ID 选择器隐藏 div

$(document).on("click" ,'[id^="picChangeAddress"]', function() {
    var num = parseInt(this.id.match(/\d+/)[0],10); //Extract number
    $('#divAddressSet'+num).toggle();
});

【讨论】：

@Jai，是的，但一定要安全。
我通常不使用.match()，但似乎是个好朋友。

【解决方案2】：

您需要从 ID 中提取数字并使用它来定位正确的选择器：

$(document).on("click" ,'[id^="picChangeAddress"]', function() {
    $('div[id="divAddressSet'+this.id.substring(16)+'"]').toggle();
});

【讨论】：

【解决方案3】：

试试这个：

$(document).on("click" ,'[id^="picChangeAddress"]', function() {
  var o = this.id.split('').pop();
  $("#divAddressSet"+o).toggle();
});

【讨论】：

@RGraham 不错不错。