jQuery bind event not firing on elements loaded via $().load()

Question

I have a DIV that is in an .html file that is loaded into my document via:

$(document).Ready( function() {
    $("#contentDiv").load("some.html")


    //some.html contains a button id=saveButton
    $("#saveButton").click( function () {
        alert("Here I am!");
    }

});

The event will not fire. If I cut the content of some.html and put it in the document, uhm, "physically", the event will fire.

So, I am pretty sure this issue is related to the fact that the html is injected via .load().

It's bothersome, because if you look at the page source, all the HTML is in fact there, including the button.

So, the question is, is there ANY way to make this work? I am using .load() to reduce page complexity and increase readability, and, code-folding notwithstanding, I really do not want to have to pull all this HTML into the document.

EDIT : This code was just typed in off the cuff. It's not a cut-n-past of the actual code, and it is just to demonstrate what the problem is. But, thanks for pointing it out.

EDIT2 : Grrrrrrr. });

Answer 1

load() is asynchronus so you need to the job in the callback :

$(document).ready(function() {
    $("#contentDiv").load("some.html", function(){
        //some.html contains a button id=saveButton
        $("#saveButton").click( function () {
            alert("Here I am!");
        });
    });
});

Hope it helps :)

Answer 2

one way is by adding to the some.html the script line which will be loaded as the div appears.

You can add this script to some.html(in a script tag):

registerButton();

and then you can define registerButton() in your current document.

other way, if I remember correctly is by using something like the function bind( )

Answer 3

jquery load() function is asynchronous. If you want to bind events to the loaded content, you should put the code into the callback function:

$(document).ready(function() {
    $("#contentDiv").load("some.html", function() {
        //you should put here your event handler
    });

});

Answer 4

If you want to fire event on element which was not available at the time when DOM was ready then you need to use .on event.

http://api.jquery.com/on/

$("#saveButton").on("click", function() {
      alert("Here I am!");
});

Answer 5

Your issue is that jquery load() function is asynchronous as @lucas mention. But his code has syntax errors, try this:

    $(document).ready(function () {
        $("#contentDiv").load("some.html", function () {
            $("#saveButton").click(function () {
                alert("Here I am!");
            });
        });
    });

Hope it helps now

Answer 6

You need to bind the event handler either after the load OR to the container of the HTML from the load

$(document).ready(function() {
  $("#contentDiv").load("some.html", function() {
    $("#saveButton").on('click',function() {
      alert("Here I am! Bound in callback");
    });
  });
});

OR use: (not needed that it be in the document ready just that the contentDiv be present)

$("#contentDiv").on('click','#saveButton',function(){
     alert("Here I am! bound to container div");
});

EDIT: load on the SAVE button click (per comments) (this makes no sense though)

$(document).ready(function() {
  $("#saveButton").on('click',function() {
    $("#contentDiv").load("some.html", function() {
      alert("Here I am! Bound in callback");
    });
  });
});