jquery - 如何将点击处理程序附加到稍后添加的内容 - J Query

Question

我有看起来像的 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 识别。这可能吗？

Answer 1

您可以在委托模式下使用 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