2

1つのdivを変更して、ajaxに置き換えています。このdivには、ajaxが成功したときに関数をスクリプトにリロードした場合にのみ機能するスクリプト（ fittext ）が実行されています。これは機能します。

また、.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コンテンツの内側のリンクをクリックすると同じようになりますが、この場合はなぜ機能しないのでしょうか。

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（）関数のようになります。これが、将来のクリックが機能しない理由だと思います。

また、ajaxcompleteのバインディングをリセットすると機能する場合があります。

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

そしてもちろん、これは2クリックのリクエストにつながります。1つ目は.list（ajax）から、2つ目はリンク自体からのものです。これはajaxには使用されない通常のクリックイベントです。

于 2012-07-24T13:46:35.983 に答える