无法将点击事件绑定到jQuery中的嵌套li

Question

我已经做了很多，但没有工作了，我想要做的时候，当我点击td然后它将采用该td的id，这个id将去数据库，它会获取该ID的所有孩子。现在我想将这些孩子追加到基于ID的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> 

HTML表使用默认的ID将所有编号的根源：

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

它的工作只有一次，但之后仅服用父TD不是孩子TD的ID。 请帮我解决这个问题。

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则表将追加到TD包含孩子的24,25,26，当我点击24时，表格会附加到包含孩子29,30的td，等等。

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

Answer 1

您是绑定的，但仅限于绑定时存在的元素。该事件向上传播，直到它遇到绑定的元素，此时它停止传播。你需要做的是将事件绑定到存在的元素，然后将该事件委托给可能存在或可能不存在的事件。像这样的东西应该工作：

$(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").live('click',function(e) { 
     // snip 

另外：如果你想绑定到将来可能因为你是动态添加元素（http://api.jquery.com/live/）添加元素

$("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);  
      } 
     }); 
    }); 

Answer 2

使用活的，而不是绑定stopPropogation正常工作。

Answer 3

尝试

$(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 = ""; 
    $("#data td:not(.child td)").bind('click',function(e) { 
     e.stopPropagation(); 
     var 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 class='child' style='border:1px solid #ddd'><tr>"; 
       for(var i=0; i<childs.length; i++){ 
        if(childs[i] != "") { 
         res += "<td id='child-"+childs[i]+"'>"+childs[i]+"</td>";               
        }            
       } 
       res += "</tr></table>" 
       $("#" + which_li).append(res);  
      } 
     }); 
    }); 
}); 

Answer 4

那么首先，你是不是绑定到新添加的单击事件TD的。 其次，不要将点击事件绑定到标记，最好给td一个类，并将点击绑定到该类，这样您将具有更大的灵活性。 修正你的代码位：

<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 = ""; 
     $("#data").on('click', '.closed', function(e) { 
      var clicked_td = $(this); 

      $.ajax({ 
       type: "POST", 
       data: { 
        id: clicked_td.attr("id") 
       }, 
       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 class='.closed' id='" + childs[i] + "'>" + childs[i] + "</td>"; //added a 'closed' class 
         } 
        } 
        res += "</tr></table>" 
        clicked_td.removeClass("closed").append(res); //removing the class, so the click event won't fire again 
       } 
      }); 
     }); 
    }); 
</script> 

，并将HTML（添加一个类来TD）：

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

在未来，尝试使用dataType: 'json'，并在你的PHP方面，你可以做一些事情像：

... 
$response = array('2', '3', '5', '10'); 
echo json_encode($response); 

使用这种方法（和它是正确的，如果你takeajax严重），你wond必须手动拆分值，所以不是：

... 
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 class='.closed' id='" + childs[i] + "'>" + childs[i] + "</td>"; 
     } 
    } 
    res += "</tr></table>" 
    clicked_td.removeClass("closed").append(res); 
} 

你可以这样做：

success: function(data) { 
    var res = "<table style='border:1px solid #ddd'><tr>"; 
    $each(data, function() 
     res += "<td class='.closed' id='" + this + "'>" + this + "</td>"; 
    }); 
    res += "</tr></table>" 
    clicked_td.removeClass("closed").append(res); 
}