Question

我有无限滚动设置，以便当浏览器点击此代码时：

     <nav id='page-nav'>
            <a href='http://localhost:8888/plum/_pages/feeds_gen/feed2.php'></a>
    </nav>

它将加载每个连续的feed2.php然后feed3.php然后feed4.php等，直到给定目录中没有更多的feed？.php文件。这是infinte滚动javascript：

$container.infinitescroll({
          navSelector  : '#page-nav',    
          nextSelector : '#page-nav a', 
          itemSelector : '.item',
          animate      : false,
          loading: {
              msgText: '<i class="icon-th loadingicon"><p style="font-size:12px; font-family: Georgia,"Times New Roman",Times,serif;">loading...</p> </i>',
              finishedMsg: '<i class="icon-ok loadingicon"><p style="font-size:12px; font-family: Georgia,"Times New Roman",Times,serif;">loaded</p></i>',
              img: 'images/blank.png'
            }
          },

最后这里是模态的html：

    <div class='yo'> 
        <div id='article6e96d894690f0b8189684405c57840c0' class='modal hide fade in bigModal' style='display: none;'>  
            <div class='modal-header'>  
                <a class='close' data-dismiss='modal'>×</a>  
                <h3>New Tax Code Most Progressive Since 1979. </h3>  
            </div>  
    <div class='modal-body'>   
        <p> 6 Jan 2013 | 9:00 pm CET</p>    
        Tax Code May Be the Most Progressive Since 1979<div readability="80"><p>Republicans resisted increasing tax rates and aimed for lower revenue targets, arguing that spending was the budget's prvere income-tax burden for people at a low level of income. It was actually kind of appalling," said Alan D. Viard, a tax expert at the American Enterprise Institute, a right-of-center research group in Washington. "Policy makers in both parties realized that was bad policy and started whittling away at it" by expanding credits and tinkering with tax rates.</p><p>After those changes and the new law, comparing average tax rates for poor households and wealthy households, 2013 might be the most progressive tax code since 1979. But economists cautioned that measuring progressivity is tricky. "It's not like there is some scientific measure of progressivity all economists agreed upon," said Leonard E. Burman, a professor of public affairs at Syracuse University. "People look at different numerical measures and they've changed in different ways at different income levels."</p><p>Mr. Viard said that over time the code had become markedly rich, even if I'm getting taxed much more than a low-income person" would be, Mr. Williams of the Tax Policy Center added.</p></div><a href='http://t.co/m6inGvk6' class='btn btn-success'>Source</a>  
    <a href='#' class='btn' data-dismiss='modal'>Close</a>

    </div>  

</div> <!--END YO -->

以下是启动模式框的HTML：

 <a data-toggle='modal' id='article_button2' href='#article6e96d894690f0b8189684405c57840c0' >New Tax Code Most Progressive Since 1979.</a>

所以，基本上当你点击<a data-toggle='modal' id='article_button2' href='#article6e96d894690f0b8189684405c57840c0' >New Tax Code Most Progressive Since 1979.</a>

时

然后弹出模态。我遇到的问题是由<nav>模态加载的任何页面都没有加载，但问题是HTML在所有feed2.php feed3.php等上都是正确的。

当无限滚动加载feed2.php？

时，有没有其他方法可以使模态出现

提前感谢大家的耐心和帮助！

Answer 1

嘿，你可以尝试一下

 <script>
jQuery(document).ready(function($){
$(".post").infinitescroll({

    loading: {
        img: "<?php echo get_template_directory_uri(); ?>/images/loading.gif",
    },
    "nextSelector":"#nav-below .nav-previous a",
    "navSelector":"#nav-below",
    "itemSelector":".post",
    "contentSelector":"#content"
}, function(newElements){ 
  //callback
$('[data-toggle="modal"]').on('click', function(event){
event.preventDefault()
    // update modal header with contents of button that invoked the modal
    $('#myModalLabel').html( $(this).html() );
    //fixes a bootstrap bug that prevents a modal from being reused
    $('#utility_body').html('<div class="loading"></div>').load(
        $(this).attr('href'),
        function(response, status, xhr) {
            if (status === 'error') {
                //console.log('got here');
                $('#utility_body').html('<p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
            }
            return this;
        }

    );
});
}
);
});
</script>

我在无限卷轴上输入加载代码到回调函数..希望我的答案没有过期给你：）

Answer 2

另一个答案是，Wayan Widyana是一个很好的答案，并引导我解决我的问题，这或多或少与描述的相同。

基本上，在无限滚动中的jQuery加载事件之后，需要重新初始化Bootstrap模式的javascript设置代码。这是通过使用Infinite Scrolls的可选回调重新运行初始模态设置代码来完成的，当新内容成功加载时（显然）会触发它。

有关这方面的更多信息可以在这里找到：

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

当无限滚动</div>加载包含模态的<div>时，Twitter模态框不显示

2 个答案: