Question

当滚动到达页面末尾时，我一直在努力为页面添加更多内容。

问题是JavaScript没有处理通过ajax加载的内容

下面是一个简单的代码：

HTML：

    <div class="ajax_load_wrapper">
        <div id="title_191">
        <div id="title_172">
        <div id="title_171">
        <div id="title_105">
        <div id="title_95"> 
        <!-- new divs load here on which jQuery events don't work -->
    </div>

    <div id="load_more_vbz" style="display: none;">
        <a href="somelink">loading...</a>
    </div>

jQuery的：

(function ($) {

    $(window).on('scroll',function(){
        if (($(window).scrollTop() == $(document).height() - $(window).height() )){
            load_mode_content();
        }
    });

    //loads more content
    function load_mode_content(){
        var link = $('#load_more_vbz a').attr('href');

        $('#load_more_vbz').show(); //show the loading image

        $.get(link).done( function(data){
            $('.ajax_load_wrapper').append(data); //appends new data
            $('#load_more_vbz').hide();
        });
        return false;
    }

})(jQuery);

Answer 1

如果您正在动态加载内容并且希望jQuery事件处理程序在该内容中工作，那么您必须执行以下操作之一：

使用可以使用动态创建的内容的委托事件处理，并且可以在内容存在之前放置事件处理程序。
在动态创建的内容位于DOM中后安装事件处理程序。

如果您正在使用静态添加的事件处理程序，那么它们将无法处理新的DOM元素，因为在运行jQuery选择器查询时这些DOM元素不存在，并且事件处理程序仅添加到元素当时存在。

如果您展示了您尝试在动态加载的内容中工作的内容和事件处理程序，我们可以提供更具体的帮助。

请参阅以前的讨论，了解如何正确使用.on()动态内容：

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

jQuery .on does not work but .live does

Proper use of .on method in Jquery

这是一般性的想法，在上面的参考文献中解释得更多：

$("static selector").on('click', "dynamic selector", fn);

Javascript无法处理通过滚动上的ajax追加的内容

1 个答案: