Ajax: success doesn't work with .live() click to execute a script

Question

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.

Answer 1

Ok, here is the answer:

I have to admit that it was simply my fault.

While I posted this working html for example:

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

I stil had this html in my content:

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

And of course this leads to two click request. The first out of the .list (ajax) and a second just from the link itself which is just a normal click event not used for the ajax.

Answer 2

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

Should be:

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

This will now make it just like a .live() function, I think this is why future clicks aren't working on it.

Also sometimes resetting some binding on ajax complete might make it work!