2

I'm just changing one div and replace it with ajax. In this div I have a script running (fittext) which will only work if I reload the function to the script within the success of the ajax. This works.

I am also using .live() click to make links inside the new content work. But if I'm using those .live() links inside the div to load the new div the script in the success won't work. I just see it working for a second and then it doesn't work anymore.

Here's my Ajax code:

$(function(){
    var replacePage = function(url) {

        $.ajax({
            url: url,
            type: 'get',
            dataType: 'html',
            success: function(data){
                var dom = $(data);
                var html = dom.filter('#content').html();

                $("#content").promise().done(function(){                            
                    $('#content').html(html);
                }); 

               //my script
               fitText();
            }
        });
    }

    $('nav a').on('click', function(e){
        history.pushState(null, null, this.href);       
        replacePage(this.href);
        e.preventDefault();
        $("#content").hide();
    });

    $(window).bind('popstate', function(){
        replacePage(location.pathname);
    });
});

And here's my .live() code:

(function(){
    var $lis = $('.list a');
    var index = 0, lastIndex = 0;

    start();

    function next(){
        lastIndex = index;
        if(++index == $lis.length) index = 0;
        $lis.eq(index).addClass('active');
        $lis.eq(lastIndex).removeClass('active');
        $lis.eq(index).click();
    };

    function prev(){
        lastIndex = index;
        if(--index < 0) index = ($lis.length - 1);
        $lis.eq(index).addClass('active');
        $lis.eq(lastIndex).removeClass('active');
        $lis.eq(index).click();
    };
    function start(){
        $lis.eq(0).addClass('active');

        $('.next').live("click", next);        
        $('.prev').live("click", prev);   
    }

})();

And here's the html:

// outside ajax content
<div class="list">
   <a href="link-1">
   <a href="link-2>
</div>

// ajaxed content
<div id="content">
   <h2 id="fittext">Heading</h2>
   <span class="prev"></span>
   <span class="next"></span>
</div>

I though I would use .live() correct here and that clicking a link outside the ajax content and inside the ajax content with .live() would do the same but I'm wondering why it doesn't work in this case.

4

2 回答 2

1 
$('nav a').on('click', function(e){
    history.pushState(null, null, this.href);       
    replacePage(this.href);
    e.preventDefault();
    $("#content").hide();
});

应该：

$(document).on('click', 'nav a', function(e){
    history.pushState(null, null, this.href);       
    replacePage(this.href);
    e.preventDefault();
    $("#content").hide();
});

现在这将使它就像一个 .live() 函数，我认为这就是为什么未来的点击不起作用的原因。

有时在 ajax 完成上重置一些绑定可能会使其工作！

于 2012-07-24T02:54:14.973 回答
0

好的，这是答案：

我不得不承认这只是我的错。

例如，当我发布此工作 html 时：

<div id="content">
   <h2 id="fittext">Heading</h2>
   <span class="prev"></span>
   <span class="next"></span>
</div>

我的内容中仍然有这个 html：

<div id="content">
   <h2 id="fittext">Heading</h2>
   <a href="#" class="prev"></a> <-- The a-tags
   <a href="#" class="next"></a> <-- The a-tags
</div>

当然，这会导致两次点击请求。第一个来自 .list (ajax)，第二个来自链接本身，这只是一个不用于 ajax 的普通点击事件。

于 2012-07-24T13:46:35.983 回答