0

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

我在编程方面仍然很陌生，但我知道如果我做了两次，那就错了。当它们被动态添加到页面时，如何将 .on() 内部的事件绑定到“更多”的每个实例？

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每次调用时附加到容器末尾的一部分。按照我目前的设置方式，功能在第三次调用时中断。

4

1 回答 1

0

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

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

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

$(document).on('click', '.more-link', function(){..stuff..});
于 2013-05-01T22:07:44.633 回答