jQuery函数不绑定到新添加的dom元素

Here's index.html:

index . html:

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script type="text/javascript">

    $(document).ready(function() {
      $('.btn_test').click(function() { alert('test'); });
    });

    function add(){
      $('body').append('<a href=\'javascript:;\' class=\'btn_test\'>test</a>');
    }

  </script>
</head>
<body>
  <a href="javascript:;" class="btn_test">test1</a>
  <a href="javascript:;" onclick="add()">add</a>
</body>

If I click on test1 link, it shows alert('test'), but if I click on add link then click on test, it doesn't show anything.

如果我点击test1链接，它会显示警告('test')，但是如果我点击添加链接然后点击test，它不会显示任何东西。

Could you explain it?

你能解释一下吗?

13 个解决方案

#1

201

For users coming to this question after 2011, there is a new proper way to do this:

对于在2011年以后来此问题的用户来说，有一种新的正确的方法:

$(document).on('click', '.btn_test', function() { alert('test'); });

This is as of jQuery 1.7.

这是jQuery 1.7。

For more information, see Direct and delegated events

有关更多信息，请参见直接事件和委托事件

#2

You need to use a "live" click listener because initially only the single element will exist.

您需要使用“活动”单击侦听器，因为最初只存在单个元素。

$('.btn_test').live("click", function() { 
   alert('test'); 
});

Update: Since live is deprecated, you should use "on()":

更新:由于不赞成使用live，您应该使用“on()”:

$(".btn_test").on("click", function(){ 
   alert("test");
});

http://api.jquery.com/on/

#3

I have same problem like question I was just near to pulling my hair then i got the solution. I was using different syntax

我也有同样的问题，就像问题，我就快抓狂了，然后我得到了答案。我使用了不同的语法

$(".innerImage").on("click", function(){ 
alert("test");
});

it was not working for me (innerImage is dynamically created dom) Now I'm using

我现在使用的是innerImage，它是动态创建的dom

$(document).on('click', '.innerImage', function() { alert('test'); });

http://jsfiddle.net/SDJEp/2/

thanks @Moshe Katz

由于@Moshe卡茨

#4

.click binds to what is presently visible to jQuery. You need to use .live:

.点击绑定到jQuery当前可见的内容。你需要使用。live:

$('.btn_test').live('click', function() { alert('test'); });

#5

Use Jquery live instead. Here is the help page for it http://api.jquery.com/live/

使用Jquery生活。这里是它的帮助页面http://api.jquery.com/live/

$('.btn_test').live(function() { alert('test'); });

Edit: live() is deprecated and you should use on() instead.

编辑:不赞成使用live()，应该使用on()。

$(".btn_test").on("click", function(){ 
   alert("test");
});

#6

This is because you click event is only bound to the existing element at the time of binding. You need to use live or delegate which will bind the event to existing and future elements on the page.

这是因为单击事件只绑定到绑定时的现有元素。您需要使用live或delegate将事件绑定到页面上的现有和未来元素。

$('.btn_test').live("click", function() { alert('test'); });

Jquery Live

Jquery的生活

#7

you need live listener instead of click:

你需要的是实时监听，而不是点击:

$('.btn_test').live('click', function() { 
   alert('test'); 
});

The reason being is that the click only assigns the listener to elements when the page is loading. Any new elements added will not have this listener on them. Live adds the click listener to element when the page loads and when they are added afterwards

原因是单击只在页面加载时将侦听器分配给元素。任何添加的新元素都不会有这个侦听器。Live在页面加载时以及之后添加时向元素添加单击侦听器

#8

When the document loads you add event listeners to each matching class to listen for the click event on those elements. The same listener is not automatically added to elements that you add to the Dom later.

当文档加载时，向每个匹配类添加事件侦听器，以便侦听这些元素上的单击事件。该侦听器不会自动添加到稍后添加到Dom的元素中。

#9

Because the event is tied to each matching element in the document ready. Any new elements added do NOT automatically have the same events tied to them.

因为事件绑定到文档中的每个匹配元素。任何添加的新元素都不会自动地将相同的事件绑定到它们。

You will have to manually bind the event to any new element, after it is added, or use the live listener.

您将不得不在添加事件之后，手动将事件绑定到任何新元素，或者使用活动侦听器。

#10

$('.btn_test').click

will add the handler for elements which are available on the page (at this point 'test' does not exist!)

将为页面上可用的元素添加处理程序(此时“test”不存在!)

you have to either manually add a click handler for this element when you do append, or use a live event handler which will work for every element even if you create it later..

您必须在执行append时为该元素手动添加一个单击处理程序，或者使用一个活动事件处理程序，即使您稍后创建它，该处理程序也将适用于每个元素。

$('.btn_test').live(function() { alert('test'); });

#11

After jquery 1.7 on method can be used and it really works nice

在jquery 1.7之后，可以使用method，它工作得很好

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    </script>
<script>
    $(document).ready(function(){
      $("p").on("click",function(){
       alert("The paragraph was clicked.");
       $("body").append("<p id='new'>Now click on this paragraph</p>");
    });
    $(document).on("click","#new",function(){
       alert("On really works.");
      });
    });
</script>
</head>
<body>
    <p>Click this paragraph.</p>
</body>
</html>

see it in action http://jsfiddle.net/rahulchaturvedie/CzR6n/

在实际操作中可以看到http://jsfiddle.net/rahulchaturvedie/CzR6n/

#12

Or just run the script at the end of your page

或者在页面末尾运行脚本

#13

You need to add a proper button click function to give a proper result

您需要添加一个合适的按钮点击函数来给出一个合适的结果

$("#btn1").live(function() { alert("test"); });

#1

201