jQuery, how to rebind html-elements after .load()

Question

I have a html-component that will be reload after a button has been clicked. Some elements of the component are bound to click and hover handlers. Everything is working fine until the .load()-function is called to reload the component. The elements of the loaded component are not bound to corresponding handlers.

At that point I put the js-script at the end of the component, so that it binds the elements. But after the components relaod the elemnts outside the component are unbound, now.

I've tried it with .on(), .live(), .bind(), .click(), ... nothing worked.

`$( document ).on( '#selector' )`. If that doesn't work, you need to show the code you have. — JJJ, Apr 14 '13 at 16:56
show attempts you've made along with sample html.. clearly not using delegation methods properly — charlietfl, Apr 14 '13 at 16:59

Zachary Kniebel · Accepted Answer · 2013-04-14T17:26:09.820

2

You should be able to call the .load() method AND create a callback in which you can rebind the elements.

For example:

$(document).ready(function() {
    ...initially bind all event handlers for page (including elements to be reloaded)...

    $("#someButton").on("click", function() { 
        $("#elementToReload").load("page-to-load.html", function() {
             ...bind all event handlers for this and containing elements here...
        });
    });
});

Let me know if you have any questions on this. Good luck! :)

edited Apr 14 '13 at 17:26

answered Apr 14 '13 at 17:00

Zachary Kniebel

4,686
3
29
53

can certainly do it this way, but for simple event handlers OP concept of delegation will defintiely work if executed with proper syntax – charlietfl Apr 14 '13 at 17:01
@charlietfl - yes, that is very true - that's why I included the bit about using `.on` in my original solution. I think that you are right that the use of the delegation methods should be emphasized, based on the OP, so I have added an example for `.on`, as well. – Zachary Kniebel Apr 14 '13 at 17:07
actually your load method won't work, most elements don't trigger a load event. The AJAX load method has a complete callback where you would do the binding. Also, your `on` syntax won't work , the selector needs to be a permanent asset, then use `target selector` argument. `$(selector).load(url,function(){ /* bind code here*/})` – charlietfl Apr 14 '13 at 17:14
that's it, putting the function call into the load('path', function() part solved the problem. Thanks a lot. – rocky Apr 14 '13 at 19:00
No problem - It's what we are here for :) – Zachary Kniebel Apr 14 '13 at 19:01
How to bind?? `...bind all event handlers for this and containing elements here...` this line should be upgraded to provide a bind function to make an answer high value :) thanks! – Gediminas Šukys Jan 24 '20 at 09:11

score 1 · Answer 2 · answered Apr 14 '13 at 16:59

I'm not sure of the way you are binding your events, but basically, if you are doing something in this way :

$('.your-class').on('click', function (e) {[...]});

You may have better to delegate it to the document, that is not reloaded.

$(document).on('click', '.your-class', function (e) {[...]});

You can be sure that even the elements that does not exists at the script execution time will be binded aswell, be cause they will be a part of your document, later.

jQuery, how to rebind html-elements after .load()

2 Answers2

Linked