javascript 将元素添加到 DOM 后,jQuery.click 不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4900802/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 15:16:59  来源:igfitidea点击:

jQuery.click not working after adding element to the DOM

javascriptdomclickjquery

提问by pedalpete

I have a simple jQuery('div#star').click(function.

我有一个简单的 jQuery('div#star').click(function.

The function works once when the DOM is initially loaded, but at a later time, I add a div#star to the DOM, and at that point the click function is not working.

该函数在 DOM 最初加载时起作用一次,但稍后,我向 DOM 添加了一个 div#star,此时单击函数不起作用。

I am using jQuery 1.4.4, and as far as I know, I shouldn't need to use .live or .bind anymore. There is never more than one div#star in the DOM at any one time. I tried changing from id="star" to class="star" but that didn't help.

我正在使用 jQuery 1.4.4,据我所知,我不需要再使用 .live 或 .bind 了。DOM 中任何时候都不会超过一个 div#star。我尝试从 id="star" 更改为 class="star" 但这没有帮助。

Any suggestions on how to get this working or why it isn't working?

关于如何使其工作或为什么它不起作用的任何建议?

I've had the .click inside the jQuery(document).ready, and in an external js file, and neither works after adding the div to the DOM.

我已经在 jQuery(document).ready 和外部 js 文件中使用了 .click,并且在将 div 添加到 DOM 后都不起作用。

回答by Emre

This works with jQuery 2.0.3

这适用于 jQuery 2.0.3

$(document).on('click', '#myDiv', function() {
    myFunc();
});

回答by Jason

As of jQuery 1.7, the .live() method is deprecated. The current recommendation is to use .on()which provides all functionality covering the previous methods of attaching event handlers. Simply put, you don't have to decide any more since on() does it all.

从 jQuery 1.7 开始,不推荐使用 .live() 方法。当前的建议是使用.on(),它提供涵盖先前附加事件处理程序方法的所有功能。简而言之,您不必再做决定,因为 on() 已完成所有工作。

Documentation is handily provided in the help for converting from the older jQuery event methods .bind(), .delegate(), and .live()

文档在帮助中轻松提供,用于从旧的 jQuery 事件方法.bind().delegate().live() 进行转换

回答by Jan

You still need to use live events.

您仍然需要使用实时事件。

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

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

回答by Rico Maglayon

try
.on('event', 'element', function(){ //code })

尝试
.on('event', 'element', function(){ //code })

回答by treeface

You need to use either liveor delegatehere. Nothing has changed in this department since jQuery 1.4.4.

您需要使用livedelegate此处。自 jQuery 1.4.4 以来,该部门没有任何变化。

Try to think of it like this: clickand bindattach an event to the element itself, so when the element disappears, all the information about the event does too. liveattaches the event at the document level and it includes information about which element and event type to listen for. delegatedoes the same thing, except it attaches the event information to whatever parent element you like.

试想想它是这样的:clickbind附加一个事件元素本身,所以当元素消失,所有关于该事件的信息也会做。live在文档级别附加事件,它包括有关要侦听的元素和事件类型的信息。delegate做同样的事情,除了它将事件信息附加到你喜欢的任何父元素。

回答by Gaurav Gupta

You can use delegateinstead on:

您可以使用委托,而不是

$(document).delegate('click', "selector", function() {
    //your code
});

I hope it will help.

我希望它会有所帮助。

回答by Luke

user "live" method $("div#star").live("click", function() {});

用户“直播”方法 $("div#star").live("click", function() {});

Doc

文件