-1

jquery を使用して html を追加しようとしていますが、新しく追加された html に従ってアクションを実行したいと考えています。ここに私がやろうとしている例があります..

これは私のhtmlです

<div id='area'></div>

このjqueryコマンドを使用して、このセクションにhtmlを追加します

 $("#area").html('<p id="mynewid">my text</p>');

pタグにテキストを追加したいので、このコマンドを使用しました

$("#mynewid").click(function() {

  $(this).html("my 2nd new text");

});

しかし、それは機能していません...

4

2 に答える 2

2

jQuery について学びたいon()。

コードを次のように変更します。

$('area').on('click', '#mynewid', function(){
    $(this).html("my 2nd new text");
});

これは、DOM 内で動的に作成されたコンテンツにイベント ハンドラーを追加する最良の方法です。

click()コードが機能しない理由は、新しいコンテンツが に追加される前にハンドラーを既に作成していると思われるためです#area div。これは、jQuery がイベント ハンドラーを存在しない DOM 要素にアタッチしようとすることを意味します。

于 2013-08-21T22:35:13.907 に答える
0

使用しているコードは、DOM の準備ができたら実行する必要があります。$(document).ready()次のような関数に含めることで、これを確実にすることができます。

<div id='area'></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>
$(document).ready(function() {
  $("#area").html('<p id="mynewid">my text</p>');
  $("#mynewid").click(function() {

    $(this).html("my 2nd new text");

  });

});

適切な HTML を追加すると、このコードが開発ボックスで機能します。

于 2013-08-21T22:43:40.143 に答える