0

次のようなHTMLがあります。

<ul>
     <li>
        <a id="MP0003631" class="pheno" href="#">nervous system phenotype</a>
    </li>
<ul>

クリックすると、JQuery は次のようになります。

$(".pheno").on("click", function(){
var id = $(this).attr("id");

$.ajax({
    type: "POST",
    url: "treescript.php",
    data: { pheno: id}
    }).done(function( msg ) {
     $('#'+id).after("<br>"+msg+"");
     alert(id);
    });

});

次のような HTML を作成します。

<ul>
   <li>
      <a id="MP0003631" class="pheno" href="#">nervous system phenotype</a>
   <ul>
       <li>
            <a id="MP0003632" class="pheno" href="#">abnormal nervous system morphology</a>
       </li>
        <li>
            <a id="MP0003633" class="pheno" href="#">abnormal nervous system physiology</a>
        </li>
   </ul>
   </li>
</ul>

問題は、作成中のコンテンツが JQuery によって認識されないことです。これは可能ですか？

4

1 に答える 1

4

デリゲート モードでjQuery のon()を使用して、セレクターに一致する後で追加された任意の要素にアタッチできます。

$("#dataTable tbody").on("click", "tr", function(event){
    alert($(this).text());
});

上記trは、動的に追加されるものと一致します#dataTable tbody(上記のコードの実行時に存在する必要があります)。

フォームを使用することもできます

$(document).on("click", "tr", function(event){
    alert($(this).text());
});

ドキュメント内の任意 trの場所に後で追加されるものにクリック ハンドラーを追加します。

于 2013-04-02T16:13:17.213 に答える