使用类选择器附加事件处理程序会影响该类的动态添加元素吗？

Question

我正在使用 jQuery 将一个函数附加到整个类的单击事件。例如：

$(".clickDiv").click(function(){
   $(this).hide();
});

在我的客户端 javascript 上，我动态创建了更多 .clickDiv 实例。
我需要再次调用$(".clickDiv).click(function...)，还是新实例会自动将该函数绑定到点击事件？

Answer 1

是的，除非您使用delegate event

像这样：

$('#container').on('click', '.clickDiv',  function() {
   $(this).hide();
});

ondocs:

如果选择器被省略或为空，则事件处理程序被称为直接或直接绑定。每次在所选元素上发生事件时都会调用处理程序，无论是从后代（内部）元素的元素或气泡直接发生。

当提供选择器时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，而只会调用与选择器匹配的后代（内部元素）。 jQuery 将事件从事件目标冒泡到附加处理程序的元素（即从最内到最外的元素），并为匹配选择器的路径上的任何元素运行处理程序。

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型-视图-控制器设计中视图的容器元素，或者如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他 HTML 之前，文档元素在文档头部是可用的，因此在此处附加事件是安全的，而无需等待文档准备好。

---

仅仅因为这里有太多人建议你应该使用live，live 已被弃用，因为版本1.7 被on 取代，并在版本1.4.3 中被delegate 取代

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

Answer 2

I am attaching an event like : 

$('body').on('click', 'button[data-tracking], a[data-tracking]',

                function(event) { console.log($(event.target));
});

and want to get to the target of element which is set up as :
  <pre> <[]a data-tracking="hello" href="hello">
    \<\span\>test now\<\/span\>
   \<\/a\>
 </pre>
it does work perfectly, but event.target gives me "span" element but what i want is "a" element so that I could get to value of data-tracking attribute. 

Answer 3

这会将事件绑定到所有新实例

$('.clickDiv').live('click',  function() {
   $(this).hide();
});

http://api.jquery.com/live/