1

標準リンクを「ajaxify」しようとしています。jQuery on（）関数を使用して、クリックをインターセプトし、コンテンツを動的に取得しています。

$('.nextLink').on("click", function(e) {
    url = $(this).attr( 'href' ).replace( /^#/, '' );
    $.get(url, null, function(response) {
        $('#searchResults').replaceWith(response);
    });
});

これは、標準のリンク動作が引き続き発生することを除いて正常に機能するため、ajaxを使用してコンテンツを取得しますが、ページ全体を更新すると消去されます。通常の送信を防ぐために、ハンドラーからfalseを返してみました

$('.nextLink').on("click", function(e) {
    ...
    return false;
}

これは機能しますが、ajaxによってロードされるコンテンツにもリンクがあります。私の理解では、jQueryのon（）関数は、ajaxを使用してロードされたコンテンツのハンドラーを再バインドする必要がありますが、追加するとreturn falseこれが発生しないようです。

したがって、私はキャッチ22の状況にあるようです。イベントのバブリングを許可して、「on（）」を正しく機能させることができますが、非ajax送信も取得するか、標準の送信を防ぐことができますが、これは休憩on()

誰かがこの状況に対処するための最良の方法を教えてもらえますか？

どうもありがとう

4

3 に答える 3

2

...これは、標準のリンク動作が引き続き発生することを除いて正常に機能するため、ajaxを使用してコンテンツを取得しますが、ページ全体を更新すると消去されます...

preventDefault()デフォルトのアクションを停止するために使用します

$('.nextLink').on("click", function(e) {
   e.preventDefault();
   ...

.nextLinkまた、新しく追加された要素にハンドラーをバインドするには、イベント委任を使用して、の親要素のクリックイベントをキャプチャする必要があります。

 $('#searchResults').on("click", ".nextLink", function(e) ...

jQueryドキュメントのon（）の使用法を参照してください

于 2012-08-30T10:55:10.130 に答える
1

.nextLinkリンクが最初に存在していたかどうかに関係なく、ドキュメントでリンクをリッスンする必要があります。

$(document).on("click", '.nextLink', function(e) {

    e.preventDefault();

    url = $(this).attr( 'href' ).replace( /^#/, '' );
    $.get(url, null, function(response) {
        $('#searchResults').replaceWith(response);
    });

});

このようにして、イベント.nextLinkがいつ作成されたかに関係なく、でイベントをリッスンします-jQuery on（）docsを確認してください。

于 2012-08-30T10:56:55.203 に答える
0

clickイベント委任を使用する必要がないように、新しくロードされたコンテンツにハンドラーを再登録するのは簡単です。

function doload(ev) {
    ev.preventDefault();

    url = $(this).attr( 'href' ).replace( /^#/, '' );
    $.get(url).done(function(response) {
        $('#searchResults').replaceWith(response);
        $('#searchResults .nextLink').on('click', doload);  // re-register new content
    });
}

$('.nextLink').on('click', doload);
于 2012-08-30T11:04:14.830 に答える