1

ページに複数のdivがあり、動的にページに追加したり、削除したりすることができます。

ページの読み込み時に、動的に作成されたdivはlocalStorage、一意のIDとdivに応じた共通のクラスを使用して読み込まれ、それに伴って関数を呼び出しますcontent()。

関数content()は次のようになります。

function content(){
    alert("test");
    $(".two button").click(function(){
        var id = $(this).parent().attr("id");
        alert(id);
    });
}

非常に単純で、関数が呼び出されたときに「テスト」を警告するだけで、をクリック.two <button>すると警告が表示され.two <textarea> .val()ます。

これは、divが読み込まれると正常に機能しますが、divのクローンを作成すると問題が発生します。

divのクローンを作成すると、上記のような一意のIDと共通のクラスが提供されます。の最後にcloneDiv()、を呼び出しますcontent()。これにより、内部の要素をクリックすると、上記と同じ結果が得られます。

問題は、関数が画面にdivがある回数だけ呼び出されることですが、<button>divをクリックすると3回.twoアラートが表示されることも意味します。.two <textarea> .val()

TLDR; getのボタンをクリックすると.two、画面上のdivの数だけ呼び出されます。これは、動的divが作成されると関数が呼び出されるためですが、呼び出す必要があるのは1回だけです。

これをすべて行うためのコードはたくさんありますが、何が起こるかをかなり明確に説明したと思います。ただし、それがさらに役立つ場合は、デモを作成します。

4

3 に答える 3

3

.on次の関数を使用します。

$('body').on('click', '.two button', function(){
    var id = $(this).parent().attr("id");
    alert(id);
});

'body'その一部をこれらのボタンの実際のコンテナに変更します。つまり、ボタンは常にidのコンテンツdiv内にあるとするとmy-div、次のようになります。

$('#my-div').on('click', '.two button', function(){
    var id = $(this).parent().attr("id");
    alert(id);
});

また、このコードは1回だけ実行する必要があるため、複数回呼び出される関数にコードを配置する必要はありません。に入れるだけ$(document).ready(....)です。

フィドル： http： //jsfiddle.net/gromer/dxbqz/

于 2012-09-27T23:42:32.417 に答える
1

これが「イベント委任」の目的です。ドキュメントにハンドラーを設定すると、ハンドラーがアタッチされた後に作成された場合でも、その子孫からのイベントが処理されます。

$(document).on("click", ".two button", function(){
// put a click hander on the document to process clicks
// from buttons that are descendants of elements with class=two
于 2012-09-27T23:43:42.627 に答える
1

問題は次のとおりです。「cloneDiv（）の最後でcontent（）を呼び出すので、内部の要素をクリックすると上記と同じ結果が得られます。」何が起こるかというと、既存の要素にイベントを複合しているため、非常に多くのコールバックが発生します。代わりに、この.on関数を使用して、1回だけ使用する必要があります。複数回呼び出すと.on、複数のイベントが登録されるため、同じ結果が得られます。

$(".two button").on("click",function(){
    var id = $(this).parent().attr("id");
    alert(id);
});

これを1回(".two button")実行すると、後で追加された場合でも、一致するすべてのボタンがそれに応答します。

別のアプローチは、要素をcontent（）呼び出しに渡し、要素を作成するときに常にこの関数を呼び出す場合は、そこからマークアップすることです。

function content(element){
 $(element).click(function(){
    var id = $(this).parent().attr("id");
    alert(id);
 });
}

補足として、アラートを使用してデバッグすると、プログラムの実行が中断されるため、問題が発生する可能性があります。console.log(id)代わりに使用して、コンソールでテスト変数を探すことを強くお勧めします。console.trace()サードパーティのスクリプトを使用していて、どこで何がうまくいかなかったかを確認する必要がある場合にも、覚えておくとよいでしょう。

于 2012-09-27T23:46:15.290 に答える