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>

具有默认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然后一个表将附加到包含子项24,25,26的td，当我点击24时，表将附加到包含子项29,30的td，依此类推。

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

Answer 1

您正在绑定，但仅限于绑定时存在的元素。事件向上传播，直到它遇到一个被绑定的元素，此时它正在停止传播。您需要做的是将事件绑定到存在的元素，然后将该事件委托给可能存在或可能不存在的事件。这样的事情应该有效：

 $("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

首先，您没有将click事件绑定到新添加的td。辅助，不要将click事件绑定到标记，更好地将类赋予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);

使用这种方法（如果你认真对待它是正确的方法），你必须手动拆分值，所以代替：

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

Answer 3

如果要绑定到将来可能添加的元素，请使用live而不是bind，因为您要动态添加元素（http://api.jquery.com/live/）：

$(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

stopPropogation也可以。

Answer 4

尝试

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

无法将click事件绑定到jquery中的嵌套li

4 个答案: