Nesting scripts?

Question

I have an empty div, like this:

<div id="my-content"></div>

Then i have some jQuery, something like this:

/**IGNORE THIS**/
function makeButton(){
    $('#my-content').html('<input type="button" value="Say hey" id="my-button" />');
}

So far, so good. Then i have this js:

$(document).ready(function(){
    makeButton();
});

Works perfect, but, when i after this makes a trigger for this button, so it looks like the following, it does not respond to the button id...

$(document).ready(function(){
    makeButton();
    $('#my-button').click(function(){
        alert('Hello!');
    });
});

I can of course add <script>$(document).ready... blah... alert('Hello');</script> into the .html() in the makeButton function, but i guess that's not the real way to do it.

How will i tell the JS to start listen for clicks AFTER makeButton() is ready and has added the button?

EDIT: Ok, that works. Sorry. The actual case is not really like the above, but similar.

the makeButton() is actually another function that gets data by ajax, so makeButton is more like this:

makeButton(){
    $.ajax({
        type: 'POST',
        url: 'ajax_images.php',
        data: {pageNr: pageNr},
        success:function(response) {
            //Loops the json and does something like this:
            var HTML = '<div id="thumbnail">;
            HTML += 'Response Stuff'
            HTML += '</div>';
            $('#my-content').html(HTML);
        } 
    });
}

Sorry for beeing confusing.

i guess you can easily put the click function outside below of te ready-brackets ? — john Smith, Feb 07 '13 at 17:59
Your problem is somewhere else, code runs fine. http://jsfiddle.net/eT6VM/ — epascarello, Feb 07 '13 at 17:59
Works fine for me: http://jsfiddle.net/ZVpmu/ What isn't working? Are you calling make button multiple times? If so, that could be your problem as you cannot have multiple ids with the same value. — John Koerner, Feb 07 '13 at 17:59
Oh darn, well, i'll make an edit. This is just an example of what's not working for me right now, i'll make an update... — gubbfett, Feb 07 '13 at 18:04
@gubbfett Please be sure to try code you post here. That avoids wasting everybody's time. — Ruan Mendes, Feb 07 '13 at 18:35

score 3 · Answer 1 · answered Feb 07 '13 at 18:03

Just make a simple change:

$(document).ready(function(){
    makeButton();
    $('#my-content').on('click', '#my-button', function(){
        alert('Hello!');
    });
});

You need delegate event for #my-button as its coming to DOM tree after page load. To know more about delegate event binding in jQuery see here.

score 3 · Accepted Answer · edited May 23 '17 at 12:12

The problem is that you are trying to bind the event handler before the element exists. The Ajax call is asynchronous!

You can return the promise object from the $.ajax call:

function makeButton(){
    return $.ajax({
        // ...
    });
}

and then bind the event handler when the Ajax call succeeded by adding a callback:

makeButton().done(function() {
    $('#my-button').click(function(){
        alert('Hello!');
    });
});

Alternatively you can use event delegation, as thecodeparadox shows in his answer. To learn a bit more about how Ajax works, have a look at this answer.

Nesting scripts?

2 Answers2