1

ちょっと変わった質問ですが、JQuery .html() を使用して div タグを追加し、それらに ID を指定すると、.click を使用できますか? コードは、私がやろうとしていることを説明しているかもしれません。そうでない場合、回避策はありますか？

新しいサイトに移動せずにサイトを動的に変更しようとしています。

したがって、ID を使用して Div を作成するとします。

$("#funTime").click(function(){
  var htmls = $("#content2").html();
  $("#content2").html(htmls + " <div id='button1'>Create</div><div id='button2'>Annimate</div><div id='button4'>Clear</div>");
 });

$("#button1").click(function(){create();});
$("#button2").click(function(){forannimation();});
$("#button3").click(function(){createOnMouse();});

うまくいきませんが、理由はわかりません。

前もって感謝します。

4

5 に答える 5

4

.on()いいえ、動的に追加された要素を処理できる必要があります。

$('#content2').on('click', '#button1', function() {
    // do your stuff
});

また、特定の ID を持つ単一の要素のみを DOM に追加できることに注意してください。あなたの例では、idを持つ要素#funTimeがクリックされるたびに、同じidを持つ要素を追加します。

ID の代わりに何らかのクラスを持つボタンを DOM に追加するか、一意の ID を生成するカウンターを用意することで、コードを改善できます。#funTimeまたは、必要に応じて使用して、他のクリックを防止.one()します。

于 2013-01-06T21:14:20.343 に答える
3

イベント ハンドラーは、存在する要素にのみ割り当てることができます。そのため、要素の作成後にハンドラーの割り当てを行う必要があります。

$("#funTime").click(function(){
  var htmls = $("#content2").html();
  $("#content2").html(htmls + " <div id='button1'>Create</div><div id='button2'>Annimate</div><div id='button4'>Clear</div>");

$("#button1").click(function(){create();});
$("#button2").click(function(){forannimation();});
$("#button3").click(function(){createOnMouse();});
 });

ただし、複数の呼び出しをクリックするfuntimeと、同じ ID を持つ複数の要素が生成され、無効なドキュメントが作成されます。ID の重複を防ぐ (カウンターを実装するなど) か、クラスを使用してください。

于 2013-01-06T21:16:10.023 に答える
1

要素が作成されるときにハンドラーを追加するには、要素が追加された直後にクリックハンドラー内に追加する必要があります....そうでない場合は、次のような委譲メソッドを使用する必要がありますon()

これはうまくいきます：

$("#funTime").click(function(){
  var htmls = $("#content2").html();
  $("#content2").html(htmls + " <div id='button1'>Create</div><div id='button2'>Annimate</div><div id='button4'>Clear</div>");
  /* elements exist  can add event handlers*/
   $("#button1").click(function(){create();});
   $("#button2").click(function(){forannimation();});
   $("#button3").click(function(){createOnMouse();});

});

より一般的な現在の慣行は、将来の要素を可能にし、ページの読み込み時に実行できる委任を使用することです

于 2013-01-06T21:21:19.183 に答える
1

画面に表示される前に、実際に要素を作成し、イベントをそれらにバインドできます。バックボーンなどもこの通りに。

var myNewDiv = $("<div ...>");
myNewDiv.click(function(){});
$(something).append(myNewDiv);

まだページにないものにイベントを追加したい場合は、jQuery デリゲートを使用する必要があります。

于 2013-01-06T21:16:55.120 に答える
1

動的に追加された要素には on() リスナーを使用する必要があります

$("#content2").on('click','#button1',function(){create();});

これにより、選択したコンテナー (#content2) にライブで追加されたボタンをチェックするリスナーが追加されます。

于 2013-01-06T21:17:49.253 に答える