Click事件不适用于动态生成的元素[重复]

本文翻译自：Click event doesn't work on dynamically generated elements [duplicate]

This question already has answers here : 这个问题已经在这里有了答案 ：

Event binding on dynamically created elements? 在动态创建的元素上进行事件绑定？ (23 answers) （23个答案）

Closed 2 years ago . 2年前关闭。

<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. 我试图通过单击按钮在<h2>生成一个类名称为test的新标签。 I also defined a click event associated with test . 我还定义了与test相关的click事件。 But the event doesn't work. 但是该事件不起作用。

Can anyone help? 有人可以帮忙吗？

#1楼

参考：https://stackoom.com/question/RwFE/Click事件不适用于动态生成的元素-重复

#2楼

.live function works great. .live函数效果很好。

It is for Dynamically added elements to the stage. 用于在舞台上动态添加元素。

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

Cheers, Ankit. 干杯，安吉。

#3楼

Use the .on() method with delegated events 将.on()方法与委托事件一起使用

$('#staticParent').on('click', '.dynamicElement', function() {
    // Do something on an existent or future .dynamicElement
});

The .on() method allows you to delegate any desired event handler to: .on()方法允许您将任何所需的事件处理程序委派给：
current elements or future elements added to the DOM at a later time. 以后将当前元素或将来元素添加到DOM。

_{PS: Don't use .live() !} _{PS：请勿使用.live() ！} _{From jQuery 1.7+ the .live() method is deprecated.} _{从jQuery 1.7+开始不推荐使用.live()方法。}

#4楼

The Jquery .on works ok but I had some problems with the rendering implementing some of the solutions above. Jquery .on可以正常运行，但是我在实现上述某些解决方案的渲染中遇到了一些问题。 My problem using the .on is that somehow it was rendering the events differently than the .hover method. 我使用.on问题是，它以某种方式呈现事件的方式与.hover方法不同。

Just fyi for anyone else that may also have the problem. 对于可能也有此问题的其他任何人来说，这只是一个事实。 I solved my problem by re-registering the hover event for the dynamically added item: 我通过为动态添加的项目重新注册悬停事件解决了我的问题：

re-register the hover event because hover doesn't work for dynamically created items. 重新注册悬停事件，因为悬停不适用于动态创建的项目。 so every time i create the new/dynamic item i add the hover code again. 因此，每次创建新的/动态项目时，我都会再次添加悬停代码。 works perfectly 完美运作

$('#someID div:last').hover(
    function() {
       //...
    },
    function() {
       //...
    }
);

#5楼

I'm working with tables adding new elements dynamically to them, and when using on(), the only way of making it works for me is using a non-dynamic parent as: 我正在使用向表动态添加新元素的表，使用on（）时，使其对我有效的唯一方法是使用非动态父级，例如：

<table id="myTable">
    <tr>
        <td></td> // Dynamically created
        <td></td> // Dynamically created
        <td></td> // Dynamically created
    </tr>
</table>

<input id="myButton" type="button" value="Push me!">

<script>
    $('#myButton').click(function() {
        $('#myTable tr').append('<td></td>');
    });

    $('#myTable').on('click', 'td', function() {
        // Your amazing code here!
    });
</script>

This is really useful because, to remove events bound with on() , you can use off() , and to use events once, you can use one() . 这真的很有用，因为要删除与on（）绑定的事件，可以使用off（），并且要使用一次事件，可以使用one（）。

#6楼

Add this function in your js file. 在您的js文件中添加此功能。 It will work on every browser 它将在所有浏览器上运行

 $(function() { $(document).on("click", '#mydiv', function() { alert("You have just clicked on "); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='mydiv'>Div</div>