CODEWITHSUNDEEP
javascriptjqueryhtml
KWallace
KWallace

Reputation: 1700

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

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. });

Upvotes: 0

Views: 137

Answers (6)

Mark Schultheiss
Mark Schultheiss

Reputation: 34158

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");
    });
  });
});

Upvotes: 0

mibrito
mibrito

Reputation: 164

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

Upvotes: 0

Luca Putzu
Luca Putzu

Reputation: 1456

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
    });

});

Upvotes: 0

Yoplaboom
Yoplaboom

Reputation: 554

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 :)

Upvotes: 1

AsgarAli
AsgarAli

Reputation: 2211

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!");
});

Upvotes: 0

Bulletproof
Bulletproof

Reputation: 51

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( )

Upvotes: 0

Related Questions