4

I'm using jQuery to manage the "Edit" button on comments for an app I'm coding. In my document.ready, I have:

$('.edit-button').click(function(){
// Code to trigger the editing interface for parent comment
});

I'm also using jQuery to display newly-posted comments without refreshing the page. Within the relevant $.ajax() function, I write the new comment to the DOM using a $.before(data). Problem is, the .edit-buttons within data don't have the aforementioned $.click() applied to them, because that happens in document.ready. So I click on them, and nothing happens.

I've tried the (extremely ugly) solution of having the Ajax function re-include the .js file in which I call document.ready. This works, except it re-applies the .click() to every single .edit-button, so they open the editing interface twice (or even three times).

So, how can I re-apply the $.click()s from document.ready? Preferably without having to copypasta my document.ready function into another javascript file, in case I modify it later.

4 Answers 4

8

Depend on your version of jQuery, there are these solution:

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

obviously the last one .on() is the best choise. More Information.

but about .bind():

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. Reference

For your problem answer is something like these:

$('.edit-button').on("click",function(){  })

or

$(document).on("click", ".edit-button", function(){  }); 

Note: Use of the .live() method is no longer recommended since later versions of jQuery offer better methods that do not have its drawbacks. More Information

Update .live() removed after jQuery 1.9 upgrade

0
4

Try this

$('body').on("click", ".edit-button", function(){

})

you might be able to change the body selector with something more targeted.

2

Since you are using AJAX, you need to use the "live()" API.

$('.edit-button').live("click", function(){
// Code to trigger the editing interface for parent comment
});
1
  • this needs to be up voted more. As more and more use AJX to create dynamic data without reloading the DOM, this is the solution. Apr 22, 2013 at 19:37
0

Use

$('.edit-button').bind('click', function() {
// Code to trigger the editing interface for parent comment
});

Or in your ajax success function after the comments have posted you can add it like:

$.ajax({
    url: "some url",
    // ...
    success: function (data) {
        //comment posted successfully
        $('.edit-button').unbind("click");
        $('.edit-button').bind("click", editButtonClickHandler);
});

function editButtonClickHandler () {
    //.. handle click
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.