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.

In first one $(#button_div).html(html) is missing quotes $("#button_div").html(html). also these two ajax calls could be done with one and use button id to populate url — ROY Finley
– ROY Finley, Commented Jan 31, 2013 at 23:45

Explosion Pills · Accepted Answer · 2013-01-31 23:46:01Z

7

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

answered Jan 31, 2013 at 23:46

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Blender · Accepted Answer · 2013-01-31 23:44:56Z

3

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

answered Jan 31, 2013 at 23:44

Blender

300k55 gold badges462 silver badges511 bronze badges

3 Comments

Justin Chmura Over a year ago

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

Blender Over a year ago

@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 Over a year ago

@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.

andrew.butkus · Accepted Answer · 2013-01-31 23:45:28Z

0

can you post the contents of both button1.php and button2.php i assume

button1.php=

<input type="button" id="button2" value="Press">

button2.php=

<input type="button" id="button1" value="Press">

?

answered Jan 31, 2013 at 23:45

andrew.butkus

7876 silver badges20 bronze badges

Comments

turnt · Accepted Answer · 2013-01-31 23:45:43Z

0

Inside you button1 click function:

$("#button1").click(function(){
    $.ajax({
        type: 'GET',
        url: 'button2.php',
        success: 
            function(html){
                $("#button_div").html(html) // You forgot pass the selector as a string
            }
        ,
    });     
});

This may fix your problem. Also, if your jQuery is being called before the element is created (remember it's top down), it will not work.

answered Jan 31, 2013 at 23:45

turnt

3,2535 gold badges27 silver badges41 bronze badges

Comments

Mike Brant · Accepted Answer · 2013-01-31 23:46:50Z

0

It is because #button2 does not exist on the page when you create the click handler. You need to use on() with its support for delegated events to do what you are looking to do.

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

Ideally you could get an element that exists on the page prior to creation of #button2 that contains #button2 that you could attach the event handler to rather than document.

answered Jan 31, 2013 at 23:46

Mike Brant

71.4k10 gold badges102 silver badges104 bronze badges

Collectives™ on Stack Overflow

Call jQuery function after ajax html get loaded

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related