jQuery .on（'click）不工作在通过.load加载的元素（'lorem.php'）

Question

我想听点击的#top，但加载php后使用jQuery它没有回应。我真的希望有人能够提供帮助，因为这是唯一无法通过Google搜索解决的问题。

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

而这里的PHP页面的输出，被加载：

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

Answer 1

我想问题可能是$（document）.ready（function（）{}）;调用将在DOM第一次准备就绪时将点击监听器应用于.load和#top分类/ id'ed元素，但“load.php”添加的.load和#top元素不在DOM中。如何将你的听众抽象为一个可重用的函数？这样的事情（修改完成处理程序）：

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

Answer 2

您需要使用的.on()事件委托模型注册处理程序。

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