.on not working on dynamic html

问题

I am creating drag and drop thing. When drop happens I create new runtime html and want to bind it event, so I have used following .on

 .on ( "event", "selector", function() {

but its not working. Here is Snippet :

$( "#wrap .dragImages" ).on( "click", "button.edit-new-modal", function() {
    var photoId = $(this).attr('data-username');        
    alert(photoId);
});

.on works before drag and drop. But afterwords nothing happens on clicking "button.edit-new-modal"!! What's wrong? Any solution?

回答1:

try :

$(document.body).on( "click", "button.edit-new-modal", function() {
  var photoId = $(this).attr('data-username');        
  alert(photoId);
});

回答2:

This

$( "#wrap .dragImages" ).on( "click", "button.edit-new-modal", function() {

should be :

$(document).on( "click", "button.edit-new-modal", function() {

回答3:

When you wire up event handlers, they are bound to the existing HTML elements only.

As and when you insert dynamic HTML, you must wire up these handlers again.

In your case, you can wrap the event handler setup in a function like this :

    function wireUpHandlers() {
        $( "#wrap .dragImages" ).on( "click", "button.edit-new-modal", function() {
            var photoId = $(this).attr('data-username');        
            alert(photoId);
        });
    }

Call this method in your document.ready and then call this method again, after you have appened your dynamic HTML to the page

回答4:

This is dynamic generated HTML so it will not work. Try using below code snippet

$(document).on( "click", "button.edit-new-modal", function() {

    var photoId = $(this).attr('data-username');        
    alert(photoId);
});

来源：https://stackoverflow.com/questions/30230712/on-not-working-on-dynamic-html