通过jquery load调用时jquery无限滚动不起作用答案

【问题标题】：jquery infinite scroll not working when calling through jquery load通过jquery load调用时jquery无限滚动不起作用
【发布时间】：2014-06-20 09:12:16
【问题描述】：

我正在使用 jquery 无限滚动插件进行分页，并且在将页面直接运行到浏览器时效果很好。但是，如果我通过 jquery load 方法调用页面，它就不起作用。我可以得到第一组结果，然后我什至看不到加载器。请帮忙。谢谢

使用 yii 无限滚动扩展的代码

$this->widget('ext.yiinfinite-scroll.YiinfiniteScroller', array(
                'contentSelector' => '#container',
                'itemSelector' => 'ul.wlist',
                'loadingText' => 'Loading next 15 rows...',
                'donetext' => 'Loading Completed.',
                'pages' => $pages,
                ));

单击按钮时打开引导模型弹出窗口

            <button name="add_more" class="btn btn-primary" id="add_more" type="submit" onClick="show_dest();">Add More?</button>

        <a data-toggle="modal"  data-target="#myModal" style="cursor:pointer;"><span id="click_frm" style="display:none">spn</span></a>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width:70%; margin-left:auto; margin-right:auto;">
        <div class="modal-content">
        <div class="modal-body" style="display:inline-block; width:100%;" > 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="position:absolute; top:10px; right:10px;" >&times;</button>

        <div id="res_search" style=" height:500px; overflow:auto; margin-top:-20px;"></div>
        </div>
        </div>
        </div>
        </div>

        <script type="text/javascript">

        function show_dest()
        {
        var r_id=document.getElementById('reg_id').value;

        $('#click_frm').trigger('click');
        }

        $(document).ready(function(){
        var reg_id=document.getElementById('reg_id').value;
        $("#res_search").load("/site/selectmore", {'reg_id':reg_id}, function(){
        }); 

        });
        </script>

【问题讨论】：

您需要发布代码或页面链接，否则无法为您提供帮助
@Ronan 添加了代码。请告诉我。谢谢
我无法在这段短代码的 HTML 中找到 ID，因此无法理解发生了什么。检查脚本是否是 AJAX 数据重载的主题的一部分。
您使用 #container 的 contentSelector，但您的代码中没有 id="container"。你确定你不尝试将滚动绑定到一个简单（还没有/不再）在那里的容器吗？

标签： jquery infinite-scroll jquery-load

【解决方案1】：

你有一些丑陋的代码

首先，将您的脚本替换为更简洁的版本

<script type="text/javascript">

function show_dest() {
    // WHAT IS THE PURPOUSE OF SETTING RID HERE ?!
    // BECAUSE IT READS REG_ID AND THEN DOES NOTHING WITH THE GOTTEN VALUE?
    var rId = $('#reg_id').val();
    $('#click_frm').trigger('click');
}

$(function() {
    var rId = $('#reg_id').val();
    $("#res_search").load( 
        "/site/selectmore", 
        { 'reg_id': rId }, 
        function(data) {
            // YOU DO NOTHING ON SUCCESS IS THIS OK?
        } 
    );
);

</script>

正确格式化代码将帮助您解决此类错误
现在阅读我的 cmets 内部代码
使用类似 Chrome 开发者工具 Javascript 控制台（F12 in Chrome) 来调试 javascript 中的错误

【讨论】：