javascript - クリックを伴うjQueryload（）動的コンテンツは、ロードされた回数だけ起動されます

Question

jQuery load（）を介してコンテンツをロードしますが、特定のページをロードするたびに、ページのクリックが複数回発生します。なぜ？？

ここでフィドルを確認してください：http： //jsfiddle.net/ZUZ3L/ph3tH/2/

Answer 1

クリックハンダーの外に置くだけですload：

$(document).ready(function() {
    function loadContent() {
        $(".ajaxContainer").load("http://fiddle.jshell.net/ #actions", function() {
            alert("Done");                
        });
    }

    $(".load").click(loadContent);
    loadContent();
});​

更新されたフィドル

Answer 2

コンテンツをロードするたびに、次の行を実行します。

$(".load").click(loadContent);

.loadこれにより、クリックされるたびに実行される新しいイベントハンドラーがイベントハンドラーのリストに追加されます。関数を3回実行すると、クリックごとにすべてトリガーされる3つの同一のハンドラーができます。

Answer 3

関数を2回呼び出しているので、これを試してください。

$(document).ready(function() {
    function loadContent() {
        $(".ajaxContainer").load("http://fiddle.jshell.net/ #actions", function() {
            alert("Done");
        });
    }
    loadContent();
    $(".load").click(loadContent);

});

http://jsfiddle.net/ph3tH/4/

Answer 4

これは、クリックイベントを複数回追加しているためです。

コードが実行されるたびに、クリック関数が再定義されます。クリックが再定義されると、前のクリックは置き換えられませんが、代わりに「クリック」イベントが発生するたびに実行されるスタックに追加されます。これは、jQueryのすべてのイベントに適用されます。

AJAXを介してロードしている間、ドキュメント内の変数とイベントは引き続き保持されます。つまり、ajax呼び出しを実行するたびに実行される関数呼び出しのレイヤーの上にレイヤーを追加しているだけです。