jQuery .on('click) not working on elements loaded throught .load('lorem.php')

Question

I'm trying to listen for clicks on the #top, but after loading php using jQuery it doesn't respond. I really hope somebody can help, since this is the only issue that couldn't be resolved by googling it.

Here's the jQuery/javascript:

function change(type, top, user){
    var ec = $('.entries-container');
    ec.load('load.php', {type: type, top: top, user: user});
}
$(document).ready(function(){
    $('.load').on('click', function(event) {
        event.preventDefault();
        var type = $(this).data('type'),
            top = '0';
        $('#top').data("current", type);
        change(type, top);
    });
    $('#top').on('click', function(event) {
        event.preventDefault();
        var data = $(this).data('current');
        change(data, data);
    });
    $('#top').on('click', function() {
        console.log('Yes');
    });
});

And here's the output of the php page which is loaded:

echo '<div class="entry cf span4 ">';
echo '<div class="entry-img bd-all-green">';
echo '<img class="" src="video/' . $e['v_name'] . '_thumb.jpeg" alt="">';
echo '</div><div class="entry-text cf bg-green txt-white">';
echo '<p class="entry-type">Image</p>';
echo '<p class="entry-votes">Votes: <span>' . $e['v_votes'] . '</span></p></div>';
echo '<p data-id="' . $e['v_id'] . '" data-type="video" class="entry-btn bd-all-green txt-green"><span>Vote</span></p></div>';

Change `$('.load').on('click',` to `$(document).on('click', '.load'` — hjpotter92, Oct 03 '13 at 00:50
You don't show the HTML for either `.load` or `#top` so it's not possible for us to make the best recommendation without guessing. — jfriend00, Oct 03 '13 at 01:17

Will · Accepted Answer · 2013-10-03T01:21:22.810

I think the problem may be that the $(document).ready(function(){}); call will apply your click listeners to .load and #top classed/id'ed elements when the DOM is first made ready, but the .load and #top elements added by "load.php" aren't in the DOM at that point. How about abstracting your listeners into a reusable function? Something like this (revised with a completion handler):

function change(type, top, user){
   var ec = $('.entries-container');
   ec.load('load.php',
           {type: type, top: top, user: user}, 
           function() { add_click_handlers(); });
}
$(document).ready(function(){
   add_click_handlers();
});

function add_click_handlers() {
    $('.load').on('click', function(event) {
        event.preventDefault();
        var type = $(this).data('type'),
            top = '0';
        $('#top').data("current", type);
        change(type, top);
    });
    $('#top').on('click', function(event) {
        event.preventDefault();
        var data = $(this).data('current');
        change(data, data);
    });
    $('#top').on('click', function() {
        console.log('Yes');
    });
}

`ec.load()` is asynchronous so `add_click_handlers()` will be called before the content has been loaded. — jfriend00, Oct 03 '13 at 01:16

score 0 · Answer 2 · answered Oct 03 '13 at 00:50

0

You need to use event delegation model of .on() to register the handler.

$('.load').on('click', '#top', function(event) {
    event.preventDefault();
    var data = $(this).data('current');
    change(data, data);
});
$('.load').on('click', '#top',function() {
    console.log('Yes');
});

answered Oct 03 '13 at 00:50

Arun P Johny

384,651
66
527
531

1

How do you know this will work when they don't show which content is static and which content is dynamically loaded. This seems like a guess. – jfriend00 Oct 03 '13 at 01:18

jQuery .on('click) not working on elements loaded throught .load('lorem.php')

2 Answers2