Call jQuery function after ajax html get loaded

Question

So i have this 2 jQuery functions stored in a .js file and .js file is loaded before head tag

what is in .js file:

$(document).ready(function(){

    $("#button1").click(function(){
        $.ajax({
            type: 'GET',
            url: 'button2.php',
            success: 
                function(html){
                    $('#button_div').html(html)
                }
            ,
        });     
    });

    $("#button2").click(function(){
        $.ajax({
            type: 'GET',
            url: 'button1.php',
            success: 
                function(html){
                    $('#button_div').html(html)
                }
            ,
        });     
    });

});

So after body I have:

<div id="button_div"><input type="button" id="button1" value="Press"></div>

when the button1 is pressed will load php file named button2.php with the div and button2 code, but here when button2 is pressed will not execute the button2 click function.

Why?

If I put the jQuery code of button2 inside button2.php file after elements will work fine. But I don't want that. I want to keep the jQuery lines saved only in a .js file and only before </head> tag. I don't want to use jQuery lines after elements.

Solution 1

When you call $("#button2").click(), #button2 does not exist yet, so you are calling it on nothing. In order to have the click event work, you need to use event delegation (i.e. bind to an element that exists) like so:

$(document).on('click', '#button2', function () {

Then, any time #button2 gets added, clicking it will trigger that event callback.

(I use document as an example, but try to use an ancestor that is closer to #button2 than that).

Solution 2

It doesn't work because your selector doesn't return an element when you first call it. $('#button2') is called only once and doesn't monitor the DOM for changes.

Use the event delegation syntax instead:

$('#parent').on('click', '#button2', function() {
    ...
});

Also your AJAX request can be simplified a little:

$("#button1").click(function() {
    $('#button_div').load('button2.php');
});

Comments

[Justin Chmura]

I believe you just have it be $("#button2").on("click", function () {}); right?

[Blender]

@JustinChmura: Not really. .on() isn't .live(). With the event delegation syntax, you're really binding the event handler to the parent element and then trickling down the event to the child element that matches the second selector.

[Mike Brant]

@JustinChmura That is incorrect for the case where you want to handle click events when #button2 does not exist yet. You must use the event delegation syntax shown in this example.