点击事件在动态生成的元素上不起作用 | 点击事件在动态生成的元素

本文介绍了点击事件在动态生成的元素上不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

 < HTML> 
< head> 
< script type =text / javascriptsrc =jquery.js>< / script> 
< script type =text / javascript> 
 
 $（document）.ready（function（）{
 
 $（button）。click（function（）{
 $（h2 
 
 $（。test）。click（function（） {
 alert（）; 
}）; 
}）; 
 
< / script> 
< / head> 
< body> 
< h2>< / h2> 
< button>生成新元素< / button> 
< / body> 
< / html>

我试图生成一个新的标签，类名为 test 在< h2> 中点击按钮。我还定义了一个与 test 相关联的点击事件。但是事件不起作用。

任何人都可以帮助？

解决方案

p>您正在使用的 click（）绑定称为直接绑定，只会将处理程序附加到已经存在的元素。它将不会被绑定到将来创建的元素。要做到这一点，您必须使用。

以下是您要查找的内容：

  var counter = 0; $ （button）。click（function（）{$（h2）。append（< p class ='test'> click me+（++ counter）+< / p>） }）; // With on（）：$（h2）。on（click，p.test，function（）{alert（$（this）.text（））;}） code>

 < script src =https：//ajax.googleapis。 com / ajax / libs / jquery / 1.8.3 / jquery.min.js>< / script>< h2>< / h2>< button>生成新元素< / button>

 
 
上述适用于使用jQuery版本1.7+的用户。如果您使用的是较旧版本，请参阅以前的答案。
 
 
 
 
 
  上一个答案：
 
 
 尝试使用：
  $（button）点击（function（）{
 $ （h2）。html（< p class ='test'>点击我< / p>）
}）; 
 
 
 $（。test）。live（'click'，function（）{
 alert（'you clicked me！'）; 
}） ; 
  
为我工作与jsFiddle。
 
 
 或者有一种新的方式做它与：
  $（h2）。delegate（p，click，function（）{
 alert（'you clicked me again！ ）; 
}）; 
  
 。
 
<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {

            $("button").click(function() {
                $("h2").html("<p class='test'>click me</p>")
            });

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

    </script>
</head>
<body>
    <h2></h2>
    <button>generate new element</button>
</body>
</html>
I was trying to generate a new tag with class name test in the <h2> by clicking the button. I also defined a click event associated with test. But the event doesn't work.
Can anyone help?
 解决方案 
The click() binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have to create a "delegated" binding by using on(). 
Here's what you're looking for:
var counter = 0;

$("button").click(function() {
    $("h2").append("<p class='test'>click me " + (++counter) + "</p>")
});

// With on():

$("h2").on("click", "p.test", function(){
    alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2></h2>
<button>generate new element</button>
The above works for those using jQuery version 1.7+. If you're using an older version, refer to the previous answer below.
Previous Answer:
Try using live():
$("button").click(function(){
    $("h2").html("<p class='test'>click me</p>")
});


$(".test").live('click', function(){
    alert('you clicked me!');
});
Worked for me. Tried it with jsFiddle.
Or there's a new-fangled way of doing it with delegate():
$("h2").delegate("p", "click", function(){
    alert('you clicked me again!');
});
An updated jsFiddle.
                        这篇关于点击事件在动态生成的元素上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！