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

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

有人能帮忙吗?


当前回答

.live函数工作得很好。

它用于向舞台动态添加元素。

$('#selectAllAssetTypes').live('click', function(event){
                    alert("BUTTON CLICKED");
                    $('.assetTypeCheckBox').attr('checked', true);
                });

干杯, Ankit。

其他回答

使用'on'作为点击绑定到已经存在的元素。

对如

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

这将有所帮助。

原因:

在jQuery中,Click()事件直接绑定,仅当特定元素(Html代码)存在于页面(页面加载后)时,将事件处理程序附加到元素上。

动态元素是在javascript或jquery的帮助下创建的(不是在Html中)。

它不会考虑页面加载后创建的未来元素(Dynamic)。

因此,正常的单击事件不会在动态元素上触发。

解决方案:

为了克服这个问题,我们应该使用on()函数。On()可以为当前元素和未来元素委托事件。

委托事件的优点是可以将处理程序附加到将来要添加到文档中的元素。

注意:delegate(),live()和on()函数比DOM元素更有优势。从JQuery 1.7开始,delegate()和live()已弃用(不要使用它们)。

可以同时为当前和未来的元素委托事件。

你的代码应该是这样的

从$(document).ready中删除代码:

$(".test").click(function(){

  alert();

});

改变为:

$(document).on('click','.test',function(){

  alert('Clicked');

});

使用委托对动态生成的内容应用事件的最佳方法。

$(document).on("eventname","selector",function(){
    // code goes here
});

你的代码现在是这样的

$(document).on("click",".test",function(){
    // code goes here
});

你可以点击添加动态创建的元素。下面的例子。使用“何时”来确保完成。在我的例子中,我用类扩展抓取了一个div,添加了一个“点击查看更多”的跨度,然后使用这个跨度隐藏/显示原始的div。

$.when($(".expand").before("<span class='clickActivate'>Click to see more</span>")).then(function(){
    $(".clickActivate").click(function(){
        $(this).next().toggle();
    })
});

您正在使用的click()绑定称为“直接”绑定,它只会将处理程序附加到已经存在的元素上。它不会与将来创建的元素绑定。为此,您必须使用on()创建一个“委托”绑定。

委托事件的优点是,它们可以处理来自稍后添加到文档的后代元素的事件。

以下是你想要的:

Var计数器= 0; $("按钮").click(函数(){ 美元(h2)。追加(“< p class = '测试' >点击我”+(+ +计数器)+ " < / p > ") }); // on(): 美元(h2)。On ("click", "p.test", function(){ 警报($(这)。text ()); }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js " > < /脚本> < h2 > < / h2 > 生成新的元素</button>

以上内容适用于使用jQuery 1.7+版本的用户。如果你使用的是旧版本,请参考下面之前的答案。


之前的回答:

尝试使用live():

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


$(".test").live('click', function(){
    alert('you clicked me!');
});

为我工作。尝试用jsFiddle。

或者用delegate()有一种新奇的方法:

$("h2").delegate("p", "click", function(){
    alert('you clicked me again!');
});

更新的jsFiddle。