Question

In the application that I’m currently creating, I am doing several AJAX calls to the server and replacing parts of my page with partial views. Everything seems to be working right except for my buttons which are “replaced” using the jQuery replaceWith() function.

In my actual code, I’m replacing a whole <div> not just a button, but the code found here will help illustrated my issue.

When the button is clicked, the JavaScript is called and thusly, that button is then updated. However, try to click on that button again, the same JavaScript will NOT be called or executed. There is some disconnect here that I’m missing. (In my mind, every time that the button with a class of “updateButton” is clicked, the javascript should be executed.) Please help me out.

Thanks

Answer 1

Event delegation.

$(document).on('click','.updateButton',function (e) {
            e.preventDefault();
    var now = new Date().getTime();

   var newButton = "<span class='btn btn-info updateButton'>Update Button " + now + "</span>"

    $(this).replaceWith(newButton);
});

Demo: http://jsfiddle.net/D2RLR/896/

Instead of binding the event to the button which will be removed (thus losing the event binding), bind it to an element that doesn’t get removed but is an ancestor of that button.