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

时间:2013-04-24 09:07:44

标签: jquery ajax

我使用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
                });

            });

上面的代码在我看来如下。

它使用class dashboard-body将目标页面加载回div。

它使用livequery

侦听加载到dom中的新分页链接

然后迭代找到的每个链接

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

然后,如果目标页面和返回页码(它是预定义变量)相等。点击此链接。

这一切似乎都有效并且使用控制台我可以看到这个声明......

if(target_page == return_page){

是预期的一次,但是click事件不会发生,好像该元素不存在,但它应该像它刚刚迭代它们一样。

我看不出有什么想法错了吗?还是有更好的方法?

2 个答案:

答案 0 :(得分:0)

我在没有.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集合。我可能错了。

答案 1 :(得分:0)

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

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