用Jquery创建的对象注册一个已有的事件处理程序

Question

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

执行一个操作。

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

我设置了一个按钮，该按钮将myclassdiv的另一个实例插入到容器div中，但是，当单击动态创建的对象时，它们什么也不做。代码，除了内部文本(foo或bar在这个例子中)是完全相同的，当观察到我的浏览器"inspect element"。事件处理程序适用于与页面一起加载的元素，但对于动态创建的对象不起作用。

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

Answer 1

您需要像这样进行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
});

Answer 2

委托事件

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

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

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

离元素越近越好