не удалось связать событие click для вложенного li в jquery

Question

Я сделал много, но ничего не работает, я бы хотел сделать, когда я нажму на td, тогда он примет идентификатор этого 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 таблицу с идентификатором по умолчанию, который будет корень всех ид:

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

это только один раз работает, но после того, что он только принимает идентификатор родительского тд не ребенка тд. Пожалуйста, помогите мне решить эту проблему.

e.stopPropagation(); 

Stop Propagation также не работает.

вот моя 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,25,26, и когда я нажму на 24, тогда таблица добавит к td, содержащему дочерние элементы 29, 30 и так далее.

но когда я хочу получить идентификатор 24 или 25, тогда он дает мне идентификатор родительского тд, который равен 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

Используйте жить вместо привязки, если вы хотите связать с элементами, которые могут быть добавлены в будущем, так как вы добавляете элементы динамически (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 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

Ну, прежде всего, не являются обязательными событие нажмите чтобы вновь добавленные ТД. Вторичный, не привязывайте событие 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 (добавлен класс тд):

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