無法將點擊事件綁定到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); 
}