Question

I have this piece of jQuery code :

$('a.manage-content-link').click(function (e) {
    var self = $(this),
        file = self.siblings('input[name="block-type"]').val();
    file = file.substring(file.length - 3);
    self.next(".manage-content-wrap").find(".manage-content").load("file-" + file + ".php?key=" + self.siblings('input[name="key"]').val());
    e.preventDefault();
});

but I think that code only just ‘load’ once it’s clicked. I don’t see that code reload the file if second, third, etc click happen. how to make jQuery reload every time click event happen? thanks!

Answer 1

I suspect that the link element is being replaced each time you load page( ie it is part of the loaded content).
If this is the case, when you replace an element, even with exactly the same ID, the events bound to it are lost. You can overcome this by delegating the handler to account for future elements that don;t exist when your code is run.

See jQuery Docs FAQ “Why do my events stop working after an AJAX request? “

$(document).on('click','a.manage-content-link',function (e) {
   /* your code*/
})

If the element is not being replaced, problem lies elsewhere ( caching, bug etc). You need to use a browser console to look and see if AJAX request is being made.

The addition of a simple logging function insode your handler( or an alert) will tell you if the click event is being executed also