0

我做了很多，但没有任何工作了，当我点击 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。请帮我。

4

4 回答 4

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);     
             }
         }); 
  });
于 2013-04-29T06:30:49.423 回答
1

首先，您没有将 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);

使用这种方法（如果你认真对待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);
}

你可以这样做：

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);
}
于 2013-04-29T06:50:51.963 回答
0

如果您想绑定到将来可能添加的元素，请使用 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 也可以正常工作。

于 2013-04-29T06:31:53.257 回答
0

尝试

$(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);     
            }
        }); 
    });   
});
于 2013-04-29T06:40:47.840 回答