Question

我只是更换一个div并用ajax替换它。在这个div中，我有一个运行的脚本（fittext），只有在我在ajax成功的情况下将函数重新加载到脚本中时才会有效。这很有效。

我也使用.live（）点击在新内容工作中建立链接。但是如果我在div中使用那些.live（）链接来加载新的div，那么成功中的脚本将无效。我只是看到它工作了一秒钟然后它不再起作用了。

这是我的Ajax代码：

$(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);
    });
});

这是我的.live（）代码：

(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);   
    }

})();

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

我虽然我会在这里使用.live（）更正，并且单击ajax内容之外的链接并使用.live（）在ajax内容中也会这样做但我想知道为什么它在这不起作用情况下。

Answer 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完成的一些绑定可能会使它工作！

Answer 2

好的，这是答案：

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

虽然我发布了这个工作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的普通点击事件。

Ajax：成功不适用于.live（）单击以执行脚本

2 个答案: