使用 Jquery 加载刷新 div，然后在重新显示内容之前单击链接

Question

我正在使用 jquery 加载函数来刷新 div 的内容。

我从隐藏 div 开始

$('.dashboard-body').fadeOut(50);

然后ajax加载——刷新内容

在加载事件之后并且刷新的 div 仍然隐藏 id 喜欢点击内容分页链接之一。然后当再次显示 div 时，会显示正确的内容。

继承人的代码不起作用。我使用 livequery 插件作为 DOM 中新元素的侦听器。

$('.dashboard-body').load(target, function(){
                $('.pagination ul li a').livequery(function(){
                    $(this).each(function(){
                        var target_page = $(this).html();
                        if(target_page == return_page){
                            $(this).click();
                        }
                    });
                });

                $('.dashboard-body').fadeIn('slow',function(){
                    //success
                });

            });

我脑海中的上述代码执行以下操作。

它将目标页面加载回带有类dashboard-body的div中。

它使用 livequery 监听加载到 dom 中的新分页链接

然后遍历找到的每个链接

它找到链接的数值，即。 1, 2, 3.... 并定义为潜在的目标页码。

那么如果目标页和返回页码（这是一个预定义的变量）相等。点击此链接。

这一切似乎都有效，使用控制台我可以看到这个语句......

if(target_page == return_page){

按预期为真，但点击事件不会像元素不存在一样发生，但它应该像刚刚迭代它们一样发生。

我看不出有什么问题？还是有更好的方法？

Answer 1

我在没有 .load 的情况下做了一个测试 http://jsfiddle.net/y6yJN/ — 它按预期工作，点击处理程序至少在我的浏览器中做得很好。另外，我使用 .text() 而不是 .html() 来获取链接中的字符串编号。

我的标记

<div class="pagination">
    <ul>
        <li>
            <a href="#example">1</a>
        </li>
        <li>
            <a href="#example2">2</a>
        </li>
        <li>
            <a href="#example3">3</a>
        </li>        
    </ul>
</div>

及其脚本：

var return_page = '2'; //some string

//click handler for links
$('.pagination ul li a').click(function(e){
    e.preventDefault;
    alert($(this).attr('href'));
    return false;
});


//must alert '#example2' on page load
$('.pagination ul li a').each(function(){
    page_number = $(this).text();
    if(page_number === return_page){
        $(this).click();
    }
});

另外，我认为你不需要 livequery 或类似的，因为回调函数是在 DOM 更改后调用的，已经在新 DOM 上创建了 jQuery 集合。我可能错了。

Answer 2

我需要为单击事件处理程序添加此代码

$('body').on('click','.pagination ul li a',function(event){