1

好的，所以我有几个对象，除了显示在它们上的文本之外，它们基本相同。单击它们时，使用现有事件处理程序执行操作

<div id="container">
  <div class="myclass">...<p>foo</p>...</div>
  <div class="myclass">...<p>bar</p>...</div>
  <div class="myclass">...<p>foo</p>...</div>
  ...etc etc
<div>
<div id="button" class="button">button-to-do-something</div>


$('.myclass').on('click', function () {
  ('this').css("background-color","red");
  //Some other junk happens here, but the red background is easily observed
});

$('#button').on('click', function() {
  $('#container').append('<div class="myclass">...<p>bar</p>...</div>');
});

我已经设置了一个按钮，可以在容器 div 中插入另一个 myclass div 实例，但是，当单击动态创建的对象时，它们什么也不做。使用我的浏览器“检查元素”观察时，除了内部文本（本例中为 foo 或 bar）外，代码完全相同。事件处理程序适用于与页面一起加载的元素，但对于动态创建的对象则没有任何反应。

我可以为动态插入的对象注册现有的事件处理程序，还是必须做一些完全不同的事情？

4

2 回答 2

3

你需要delegate这样：

$('#container').on('click','.myclass', function () {
  ('this').css("background-color","red");
  //Some other junk happens here, but the red background is easily observed
});

或者

$(document).on('click','.myclass', function () {
  ('this').css("background-color","red");
  //Some other junk happens here, but the red background is easily observed
});
于 2013-06-05T21:33:17.553 回答
2

委托活动

$(staticContainer).on('click', '.myClass' function () {

staticContainer是绑定事件时存在于 DOM 中的任何容器。

Closest staticContainer在你的情况下可能是'#container'

离元素越近越好

于 2013-06-05T21:34:14.757 回答