Javascript 无法将单击事件绑定到jquery中的嵌套li

我已经做了很多，但没有任何工作了，我想做的是，当我点击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>

停止传播也不再有效

这是我的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>

//这是我的桌子结构
2.
24
29
30
25
26

当我单击ID2时，一个表将附加到包含childs 24,25,26的td，当我单击24时，一个表将附加到包含childs 29,30的td，依此类推

---

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

您正在绑定，但仅绑定到绑定时存在的元素。事件会一直传播，直到它到达绑定的元素，此时它将停止传播。您需要做的是将事件绑定到存在的元素，然后将该事件委托给可能存在或可能不存在的元素。像这样的方法应该会奏效：

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

$（“body”）。在（'click'，'td'，函数（e）上{
e、 停止传播（）；
哪个_li=$（this.attr（“id”）；
$.ajax（{
类型：“POST”，
数据：{id:which_li}，
cache:false，
url:t+“treeData”，
成功：功能（数据）{
var childs=data.split（“，”）；
var res=“”；
对于（var i=0；i您正在绑定，但仅绑定到绑定时存在的元素。事件会一直传播，直到到达绑定的元素，此时它将停止传播。您需要做的是将事件绑定到存在的元素，然后将该事件委托给可能存在或可能不存在的元素。类似于工作：

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

$（“body”）。在（'click'，'td'，函数（e）上{
e、 停止传播（）；
哪个_li=$（this.attr（“id”）；
$.ajax（{
类型：“POST”，
数据：{id:which_li}，
cache:false，
url:t+“treeData”，
成功：功能（数据）{
var childs=data.split（“，”）；
var res=“”；
对于（var i=0；i如果要绑定到将来可能添加的元素，请使用live而不是bind，因为您正在动态添加元素（）：

$（文档）.ready（函数（）{
var url=document.url；
var parts=url.split（“/”）；
var t=“”；
对于（var i=0；i如果要绑定到将来可能添加的元素，请使用live而不是bind，因为您正在动态添加元素（）：

$（文档）.ready（函数（）{
var url=document.url；
var parts=url.split（“/”）；
var t=“”；
对于（var i=0；iTry

$（文档）.ready（函数（）{
var url=document.url；
var parts=url.split（“/”）；
var t=“”；
对于（var i=0；iTry

$（文档）.ready（函数（）{
var url=document.url；
var parts=url.split（“/”）；
var t=“”；
对于（var i=0；i首先，您没有将click事件绑定到新添加的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>

使用此方法（如果您认真对待Ajax，这是正确的方法），您将不得不手动拆分值，而不是：

...
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);
}

。。。
成功：功能（数据）{
var childs=data.split（“，”）；
var res=“”；
对于（变量i=0；i

您可以这样做：

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);
}

成功：函数（数据）{
var res=“”；
$each（数据，函数（）
res+=“”+此+“”；
});
res+=“”
单击删除类（“关闭”）.append（res）；
}
首先，您没有将点击事件绑定到新添加的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>

使用此方法（如果您认真对待Ajax，这是正确的方法），您将不得不手动拆分值，而不是：

...
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);
}

。。。
成功：功能（数据）{
var childs=data.split（“，”）；
var res=“”；
对于（变量i=0；i

您可以这样做：

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);
}

成功：函数（数据）{
var res=“”；
$each（数据，函数（）
res+=“”+此+“”；
});
res+=“”
单击删除类（“关闭”）.append（res）；
}
我只看到一个td，那里的mateID是唯一的，不应该只包含一个数字。请在将子项插入
后发布HTML
我看到只有一个td，那里的mateID是唯一的，不应该只包含一个数字。请在将子项插入
后发布HTML，不要使用live或绑定。在上使用。
$。live
已被弃用，并已从中删除。请使用INSTEAD不要使用live或bind。在上使用。
$。live
已被弃用
...
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);
}