8

私は他のスレッドを調査しましたが、混乱しています。

状況: ユーザーが AJAX を介して動的に指定する div をロードする汎用 jQuery プラグインを提供しています。すべて正常に動作しますが、たとえばあるユーザーのページでは、「準備完了」イベントが再起動されないため、呼び出されない JS の一部があります。

通常の状況では、ユーザーの他の jQuery は jQuery(document).ready の後に配置されます。

呼び出しをテストしました：

$(document).trigger('ready');

手動で-「準備完了」は一度だけ呼び出されると推測されるため、まったく効果がありません。

それを処理する適切な方法は何ですか？（可能な限り最も一般的なソリューションを提供することは素晴らしいことです）

このスレッドで提案されているようなことをしたいと思います：

$document.ready をトリガーする (変更できない AJAX コードが実行されるようにする)

しかし、readyList はプライベートになり、直接操作できなくなったと思いますか?

私が提供しているプラ​​グインは、ユーザーにコールバック機能を提供することに注意してください。もちろん、ロード後の処理を行う JS コードをそこに配置することもできます。

よろしくお願いいたします。

4

3 に答える 3

14

DOM Ready 関数全体をリロードしようとしないでください。特に有害なのは、イベントの n+n の性質です。たとえば、同じ要素での 2 つのクリック イベントは、DOM 対応関数がそれらによって繰り返し再起動されると、4、8 などになる可能性があります。

ajax 呼び出しが完了したら実行する必要があるコードを取り出すことで、これを回避できます。おそらく、再初期化するイベントから恩恵を受けることを望んでいる要素の人口が増えます。

$(document).ready(function()
{
    initialise();

    //... Resume with DOM ready
});

function initialise()
{
    // create event here that needs re-initialising
}

したがって、ajax 呼び出しが完了したら、initialise()もう一度呼び出してください。

または、バブルアップ機能を使用して使用することを検討してください.on。これが、この種の問題を処理する方法です。これにより、スクリプト内の DOM 対応関数の一部を「再初期化」することを考える必要がなくなります。

コメントからの追加

.onどの動的要素がそのコンテナ内で実際にイベントをトリガーするかを制御しながら、いつでも変更されないページ上の低レベル要素にイベントをバインドできます。

<div id="container">

    <div id="ajax-content">

        <a href="#" class="created-link">A new link</a>

    </div>

</div>

<a>したがって、DOM Ready イベントが発生した後に ajax 関数によって が作成されることがわかっているため、それに適用された直接のイベントは機能しません。

代わりに、イベントを下位レベルの変更されていない要素にバインドし、それを含む動的 DOM 要素にバブルアップします。

$('#container').on('click', '.created-link', function(event)
{
    event.preventDefault();

    // Your normal onclick code
});
于 2012-09-02T12:30:08.053 に答える
0

# as href でのリンクが機能していないようです。これに気をつけてください。:)

于 2013-05-17T14:55:38.323 に答える