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

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 '
';
echo '
';
echo '';
echo '
';
echo '
Image
';
echo '
Votes: ' . $e['v_votes'] . '
';
echo '
Vote
';

Answer

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