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 のルートとなるデフォルトの id を持つ HTML テーブル:

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

一度だけ動作しますが、その後は子 td ではなく親 td の ID のみを取ります。この問題を解決するのを手伝ってください。

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>

ID 2 をクリックすると、子 24、25、26 を含む td にテーブルが追加され、24 をクリックすると、子 29、30 を含む td にテーブルが追加されます。

しかし、24または25のIDを取得したい場合、毎回2である親tdのIDが返されます。私を助けてください。

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

まず第一に、クリック イベントを新しく追加された 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);

この方法を使用すると (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

要素を動的に追加しているため、将来追加される可能性のある要素にバインドする場合は、バインドの代わりにライブを使用します ( 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 に答える