<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关联的单击事件。但是这个事件不起作用。

有人能帮忙吗?


当前回答

原因:

在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');

});

其他回答

.live函数工作得很好。

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

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

干杯, Ankit。

在js文件中添加这个函数。 它可以在所有浏览器上运行

$(函数(){ 美元(文档)。On ("click", '#mydiv', function() { 提示(“您刚刚点击了”); }); }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < div id =“mydiv”> div < / div >

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

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

你的代码现在是这样的

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

你也可以使用onclick="do_something(this) "“内部元素

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

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