jQuery .on('click） 在通过 .load('lorem.php'） 加载的元素上

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

本文关键字：加载 php 元素 lorem click on jQuery load      更新时间：2023-09-26

我正在尝试监听 #top 上的点击，但是使用jQuery加载php后它没有响应。我真的希望有人能提供帮助，因为这是唯一无法通过谷歌搜索解决的问题。

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

我认为问题可能是 $（document）.ready（function（）{}）; 当 DOM 首次准备就绪时，调用会将您的点击侦听器应用于 .load 并 #top 分类/id 元素，但由"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');
    });
}

需要使用.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');
});
相关文章：