Question

这是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>

如果我点击test1链接，则会显示alert('test')，但如果我点击add链接，则点击test，它不会显示任何内容。< / p>

你能解释一下吗？

Answer 1

对于在2011年之后提出此问题的用户，有一种新的正确方法：

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

这是jQuery 1.7。

有关详细信息，请参阅Direct and delegated events

Answer 2

您需要使用“实时”点击监听器，因为最初只存在单个元素。

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

更新：由于不推荐使用直播，您应该使用“on（）”：

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

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

Answer 3

我有同样的问题，就像问题我只是拉着我的头发，然后我得到了解决方案。我使用的是不同的语法

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

它不适合我（innerImage是动态创建的dom）现在我正在使用

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

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

感谢@Moshe Katz

Answer 4

.click绑定到jQuery目前可见的内容。你需要使用.live：

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

Answer 5

使用Jquery live 代替。以下是http://api.jquery.com/live/

的帮助页面

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

修改：live()已弃用，您应该使用on()代替。

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

Answer 6

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

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

Jquery Live

Answer 7

您需要live listener而不是点击：

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

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

Answer 8

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

Answer 9

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

在添加事件后，您必须手动将事件绑定到任何新元素，或者使用实时侦听器。

Answer 10

$('.btn_test').click

将为页面上可用的元素添加处理程序（此时'test'不存在！）

您必须在追加时手动为此元素添加点击处理程序，或使用live事件处理程序，即使您稍后创建它也适用于每个元素。

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

Answer 11

在jquery 1.7之后可以使用方法，它真的很好用

<!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>

看到它在行动 http://jsfiddle.net/rahulchaturvedie/CzR6n/

Answer 12

或者只是在页面末尾运行脚本

Answer 13

您需要添加适当的按钮单击功能才能获得正确的结果

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

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

13 个答案: