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

#1 楼

 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> 

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


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

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

#2 楼

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

#3 楼

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

  alert();

});

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

  alert('Clicked');

});

#4 楼

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

#5 楼

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

 $(".test").live('click', function(){

#6 楼

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

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

#7 楼

#8 楼

 $("body").delegate('.test', 'click', function(){
 ...
  alert('test');
 });

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

#9 楼

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

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

#10 楼

$(.surrounding_div_class).on( 'click', '.test', function () {
alert( 'WORKS!' );
});

#11 楼

<script type="text/javascript">
    $(document).ready(function(){                          
        $("button").click(function(){                                  
            $("h2").html("<p class='test'>click me</p>")                          
            $(".test").click(function(){                          
                alert()                          
            });       
        });                                     
    });
</script>

#12 楼

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

#13 楼

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

#14 楼

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

#15 楼

$('#displayContact').click(function() {
    TINY.box.show({html:'<form><textarea id="contactText"></textarea><div id="contactSubmit">Submit</div></form>', close:true});
    setTimeout(setContactClick, 1000);
})

function setContactClick() {
    $('#contactSubmit').click(function() {
        alert($('#contactText').val());
    })
}

#16 楼

#17 楼

var newLink= $("<a></a>", {
        "id": "approve-ctrl",
        "href": "#approve",
        "class": "status-ctrl",
        "data-attributes": "DATA"
    }).html("Its ok").appendTo(document.body);

newLink.get(0).addEventListener("click", doActionFunction);

function doActionFunction(e) {
    e.preventDefault();
    e.stopPropagation();

    alert($(this).html());
}

if (typeof Element.prototype.addEventListener === 'undefined') {
    Element.prototype.addEventListener = function (e, callback) {
      e = 'on' + e;
      return this.attachEvent(e, callback);
    };
  }

#18 楼

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

    function test(e){
        alert();
    });

    function test(e){
        alert();

        // Get a reference to the button
        // An explanation of this line is available here
        var target = (e.target)? e.target : e.srcElement;

        // Pass the button reference to jQuery to do jQuery magic
        var $btn = $(target);

    });

#19 楼

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

#20 楼

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