javascript - 无法将点击事件绑定(bind)到jquery中的嵌套li

Question

我已经做了很多，但没有任何效果了，我想在单击 td 时执行此操作，然后它将获取该 td 的 id，该 id 将转到数据库，它将获取该 td 的所有子项ID。现在我想根据 id 将这些 child 附加到该 td 中。但是当我点击嵌套的 td 时，它会获取父级的 id。这是我的代码。

<script type="text/javascript" >
$(document).ready(function() {
       var url = document.URL;
       var parts = url.split("/");
       var t = "";
       for(var i=0; i<parts.length-1; i++) {
            t += parts[i] + "/";
       }
       var which_li = "";
      $("td").bind('click',function(e) {
             e.stopPropagation();
             which_li = $(this).attr("id");

             $.ajax({   
                 type: "POST",
                 data : {id : which_li},
                 cache: false,  
                 url: t+"treeData",   
                 success: function(data){
                     var childs = data.split(",");
                     var res = "<table style='border:1px solid #ddd'><tr>";
                     for(var i=0; i<childs.length; i++ ){
                         if(childs[i] != "") {
                             res += "<td id='"+childs[i]+"'>"+childs[i]+"</td>";                                                         
                         }                                               
                     }
                     res += "</tr></table>"
                     $("td[id='" + which_li +"']").append(res);     
                 }
             }); 
      });   
});
</script>

带有默认 id 的 Html 表将成为所有 id 的根:

  <table id="data" style=" margin:0 auto; border:1px solid #ddd" >
    <tr>
         <td id='2'>2</td>
    </tr>
  </table>

它只工作一次，但之后它只获取父 td 的 ID，而不是子 td。请帮我解决这个问题。

e.stopPropagation();

停止传播也不再起作用。

这是我的sql表

create table user_login (
        id int not null auto_increment,
        parent int not null
);

<小时/>

我的表结构如下:

// this is my table strucutre
<table id="data" >
     <tr>  
          <td id="2">2
               <table>
                   <tr>
                       <td id="24">24
                             <table>
                                <tr>
                                    <td id="29">29</td>
                                    <td id="30">30</td>
                                </tr>
                             </table>
                       </td>
                       <td id="25">25</td>
                       <td id="26">26</td>
                   </tr>
               </table>
          </td>
     </tr>
</table>

当我点击 id 2 时，一个表格将附加到包含 child 24,25,26 的 td，当我点击 24 时，一个表格将附加到包含 child 29,30 等的 td。

但是当我想获取 24 或 25 的 id 时，它每次都会给我父 td 的 id 2。请帮助我。

Answer 1

您正在绑定(bind)，但仅限于绑定(bind)时存在的元素。事件会一直传播，直到遇到已绑定(bind)的元素，此时它会停止传播。您需要做的是将事件绑定(bind)到存在的元素，然后将该事件委托(delegate)给可能存在或可能不存在的元素。像这样的东西应该有效:

 $("body").on('click', 'td', function(e) {
         e.stopPropagation();
         which_li = $(this).attr("id");

         $.ajax({   
             type: "POST",
             data : {id : which_li},
             cache: false,  
             url: t+"treeData",   
             success: function(data){
                 var childs = data.split(",");
                 var res = "<table style='border:1px solid #ddd'><tr>";
                 for(var i=0; i<childs.length; i++ ){
                     if(childs[i] != "") {
                         res += "<td id='"+childs[i]+"'>"+childs[i]+"</td>";                                                         
                     }                                               
                 }
                 res += "</tr></table>"
                 $("td[id='" + which_li +"']").append(res);     
             }
         }); 
  });