2

jQuery と ajax を使用して、Web サイト全体をリロードせずにページをロードしていますが、問題が発生しました。これは jquery スクリプトです。

$(function(){
$("a[rel='tab']").click(function(e){
    e.preventDefault(); 

    //get the link location that was clicked
    pageurl = $(this).attr('href');

    //to get the ajax content and display in div with id 'content'
    if(pageurl!=window.location){
    $.ajax({url:pageurl+'?rel=tab',success: function(data){
        $('#main-wrap').html(data);
    }});
    }
    //to change the browser URL to 'pageurl'
    if(pageurl!=window.location){
        window.history.pushState({path:pageurl},'',pageurl);    
    }
    return false;  
   });
     });

   /* the below code is to override back button to get the ajax content without reload*/
      $(window).bind('popstate', function() {
$.ajax({url:location.pathname+'?rel=tab',success: function(data){
    $('#main-wrap').html(data);
}});
});

そしてhtmlコードは次のようなものです：

<div class="nav"><a href="example1.html" rel="tab">Page 1</a></div>
<div class="ajax-content">
<div class="title"><a href="title_page.html" rel="tab">Title</a></div>
</div>

ajaxコンテンツがロードされているdivの外側にある「ページ1」をクリックすると機能しますが、divの内側にある「タイトル」をクリックすると、ページ全体がリロードされます(ajaxが機能しません)。その「タイトル」リンク(ajaxコンテンツがロードされるdiv内にある)を機能させることは可能ですか?

4

3 に答える 3

0

実際の問題は、ドキュメントの準備ができているすべてa[rel='tab']にイベントハンドラーを追加しているが、事後にターゲットをロードし<a>ていることです。つまり、イベント ハンドラーがクリックにバインドされないということです。liveor more importantlyのようなものを使用する必要がありますon。重要なのは、次のようなものを使用するイベント委任です。

$("#container").on("click", "a[rel='tab']", function () {
    // Your code
});

このようにしa[rel='tab']て、要素内で削除または追加されたものには、#containerこのイベント ハンドラーが関連付けられます。

于 2012-10-24T16:38:56.333 に答える
0

すでにスクリプトを作成している場合は、内部リンクを捨てて、代わりに url を data-url 属性に入れます。そうすれば、トラックをデフォルトの動作でカバーすることを心配する必要はありません。div は次のようになります。

<div class="title" id='link_btn' data-url="title_page.html">Title</div>

次に、次のようにコードを作り直します。

("#link_btn").click(function(){  

    //get the link location that was clicked
    pageurl = $(this).attr('data-url');

データ属性は、要素とスクリプトの間でデータを渡す優れた方法です。特殊文字や引用符がそれらを台無しにして判読不能にする可能性があるため、それらを作成するときは注意する必要があります.

于 2012-10-24T16:36:24.153 に答える
0

href 属性を # に設定し、return false; を追加します。

これを試して：

<div class="title"><a href="#" rel="tab" onclick="return false;">Title</a></div>
于 2012-10-24T16:34:12.550 に答える