0

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

问题是 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);
4

1 回答 1

2

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

  1. 使用将与动态创建的内容一起使用的委托事件处理，并且可以在内容存在之前放置事件处理程序。

  2. 在动态创建的内容在 DOM 中之后安装事件处理程序。

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

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

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

jQuery .live() 与 .on() 方法在加载动态 html 后添加点击事件

jQuery.on() 是否适用于在创建事件处理程序后添加的元素？

jQuery .on 不起作用，但 .live 可以

在 Jquery 中正确使用 .on 方法

这是一般的想法，在上面的参考资料中有更多解释：

$("static selector").on('click', "dynamic selector", fn);
于 2013-04-18T05:22:31.020 回答