修改后的 DOM 中的 JQuery 访问元素答案

【问题标题】：JQuery Access Elements in Modified DOM修改后的 DOM 中的 JQuery 访问元素
【发布时间】：2010-03-21 03:15:41
【问题描述】：

长期以来，我一直在尝试在我的 dom 中添加了异步的元素上使用事件。我读过一些关于 bind 的文章，但是有没有不同的方法来建立这样的东西？

例如我有这种情况。

$.getJQUERY(myUrl, {var:value}, function(i, data){
  $.each(data.values, function(value){
      $("body").append('<div id="div_no_'+i+'">'+value+'</div>);
     // Here i dont want to place the EventListeners
  })
});
$("div_no_1").click(function(){
    // do something
});

有人可以帮我找到一种方法来建立这样的东西吗？？

提前谢谢你

很棒

伯恩哈德

【问题讨论】：

标签： jquery getjson

【解决方案1】：

您可以像这样使用.live() 点击处理程序：

$("div[id^=div_no_]").live('click', function(){
  // do something
});

这会侦听来自 ID 以 div_no_ 开头的现有或新元素的点击

您只需要一次，它将适用于您创建的所有 div。

Jason 的评论对您的情况也很有意义，如下所示：

$.getJQUERY(myUrl, {var:value}, function(i, data){
  $.each(data.values, function(value){
      $("body").append('<div id="div_no_'+i+'" class="clickme">'+value+'</div>');
  })
});

$(".clickme").live('click', function(){
  // do something
});

【讨论】：

另外，您可以为每个 div 添加一个类并绑定到该类。
@Jason - 同意，这使这个案例更清晰/更明确，更新为包含该选项。
.live 非常适合这个，但是如果你使用 jQuery 1.4.2，他们还添加了 .delegate .delegate 的原因是 .live 事件都绑定到文档。在某些情况下这很好，但如果你使用很多它们真的会导致速度变慢。 .delegate 的工作方式类似，但您绑定的是父元素，而不是一直绑定到文档。 learningjquery.com/2010/03/… 有一篇很好的关于区别的文章。
@Brian - 实际上委托在内部使用live()（即使在 1.3.2 中，您也可以通过提供实时上下文来执行此操作）。由于他已将元素添加到 body 并在那里单击它们，因此这是 2 个气泡与 1 个气泡，一个非常非常微不足道的区别。正确地说，.delegate() 可以附加到任何共同的祖先，而不仅仅是父（在普通的.live()，共同的祖先恰好是文档，默认上下文），它只不过是 .live() 具有更本地化的语境。如果你测试一下，速度差异真的很小，人们似乎高估了它。

【解决方案2】：

这是 Nick 的答案，可以帮助您更多地理解 jQuery 和 Javascript：

$.getJQUERY(myUrl, {var:value}, function(i, data){
  $.each(data.values, function(value){
      var myDiv = document.createElement('div');
      $(myDiv).id('div_no_' + i).addClass('clickme').text(value);
      $('body').append(myDiv);
  })
});

$(".clickme").live('click', function(){
  // do something
});

这样做的好处是它更加模块化，如果您决定在未来进行更改/更新。例如，如果您决定不再希望它成为 div，您可以简单地将创建的元素类型更改为 span，这是您需要进行的唯一更改（授予在这个例子中，变量被称为myDiv，但希望你能更好地命名你的变量:)。基本上，您不是直接渲染 HTML，而是将其抽象化，以便 jQuery/JS 为您完成繁重的工作。

不是想抢走尼克的风头，只是提供一个替代的教学示例。

【讨论】：