Question

我正在尝试将无限滚动网站移植到移动设备，禁用AJAX滚动并将其替换为AJAX“更多”按钮。我在理解如何将初始点击事件绑定到“更多”按钮的后续实例时遇到了问题。

我仍然是编程的绿色，但我知道，如果我做两次，那就错了。如何将.on（）内的事件绑定到“more”的每个实例，因为它们会动态添加到页面中？

JS：

$('.more-link').on('click', function(){

    var url = $(this).attr('href');        
    $(this).removeAttr('href');
    $(this).remove();

    $.get(url, function(data) {
        $('.infinite-container').append(data);

        // Callback for .on()
        }).done(function (){

        // Add visibility for "more" buttons 
        $('.more-link').css({'visibility': 'visible'});  

        // Here's where I'm repeating myself       
        $('.more-link').on('click', function(){

            var url = $(this).attr('href');
            $(this).removeAttr('href');
            $(this).remove();

            $.get(url, function(data) {
                $('.infinite-container').append(data);
            })
        });

    });
});

任何见解和效率都将受到赞赏。

编辑：我应该补充一点，“更多”链接是每次调用时附加到容器末尾的data的一部分。我目前设置它的方式，第三次调用功能中断。

Answer 1

想出来。 JQuery的.on（）具有额外的参数，允许稍后动态添加的目标元素。在这种情况下，将绑定添加到父元素（如document）中的特定选择器可完成任务：

$(element).on('event', 'selector', function(event) {...});

因此，对于问题中的示例，代码应为：

$(document).on('click', '.more-link', function(){..stuff..});

在新附加的AJAX元素上绑定相同的事件

1 个答案: