2

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

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

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

4

3 回答 3

7

是的，除非您使用delegate event

像这样：

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

on 文档：

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

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

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

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

只是因为这里有太多人建议您应该使用live,live已被弃用，因为 version 1.7by并在 version byon中被替换1.4.3delegate

$(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+
于 2012-04-09T03:02:23.233 回答
1 
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.
于 2012-04-24T19:39:37.353 回答
0

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

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

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

于 2012-04-09T03:09:16.930 回答