Twitter模态框在包含模态时不显示从<div>无限滚动加载



我有无限滚动设置,这样当浏览器点击以下代码时:

     <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文件。这是中篇卷轴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时,有没有其他方法可以使模态出现?

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

hei,你可以试试

 <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>

我正在输入加载代码以在无限滚动上回调函数。。希望我的答案不会过期:(

我Wayan Widyana的另一个答案是一个很好的答案,它引导我朝着解决问题的方向前进,这或多或少与所描述的相同。

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

关于这方面的更多信息可以在这里找到:

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

相关内容

  • 没有找到相关文章

最新更新