jquery - div内のテーブルをトラバースしない

Question

.children（）を使用してdiv内のテーブルを空にしようとすると、ajaxの新しい結果が追加されますが、トラバースが機能しません。私のtrは、別の関数でajaxを使用して動的に作成されるため、クリックの成功ajax内で関数を呼び出して、リクエストを再度リロードし、divを再度リロードするようにします。plssはみんなを助けます。

html

<div id="curr-elem">
  <div class="box-header">
     <h3>Elementary Subject</h3>
  </div>
  <div id="curr-elem-content">
      <table id="curr-elem-tble">

        <tr>
          <td>
            <lable>Subject:<input type="text" readonly="readonly" value="a" rel="1" name="subject[0]"></lable>
          </td>
          <td>
             <input id="activate[0]" class="button active modal2 inactiveButton" type="button" disabled="disabled" value="Apply" name="active" rel="#loading-window">
             <input id="inactivate[0]" class="button inactive modal2 " type="button" value="Remove from list" name="active" rel="#loading-window">
          </td>
       </tr>
       <tr>
          <td>
            <lable>Subject:<input type="text" readonly="readonly" value="ssssss" rel="8" name="subject[1]"></lable>
          </td>
          <td>
             <input id="activate[1]" class="button active modal2 inactiveButton" type="button" disabled="disabled" value="Apply" name="active" rel="#loading-window">
             <input id="inactivate[1]" class="button inactive modal2 " type="button" value="Remove from list" name="active" rel="#loading-window">
          </td>
        </tr>
        <tr>
          <td>
            <lable>Subject:<input type="text" readonly="readonly" value="alvin" rel="9" name="subject[2]"></lable>
          </td>
          <td>
            <input id="activate[2]" class="button active modal2 inactiveButton" type="button" disabled="disabled" value="Apply" name="active" rel="#loading-window">
            <input id="inactivate[2]" class="button inactive modal2 " type="button" value="Remove from list" name="active" rel="#loading-window">
          </td>
        </tr>
        <tr>
          <td>
            <lable>Subject:<input type="text" readonly="readonly" value="ronniel" rel="10" name="subject[3]"></lable>
           </td>
           <td>
             <input id="activate[3]" class="button active modal2 inactiveButton" type="button" disabled="disabled" value="Apply" name="active" rel="#loading-window">
             <input id="inactivate[3]" class="button inactive modal2 " type="button" value="Remove from list" name="active" rel="#loading-window">
           </td>
        </tr>

  </table>
 </div>
</div>

ajax：

  $('.active').live('click',function (){

            var prev = $(this).parent().prev().find('input[type=text]');
              var valText = $(prev).val();

              var relVal = $(this).parent().prev().find('input[type=text]').attr('rel');

                 var div = $(this).parent().parent().parent().parent().parent().attr('id');





               $.ajax({
                          type:'POST',
                          url:'add_subject.php',
                     dataType:'json',
                         data:{'func_numbr':'7','subjct_name':valText,'subjct_id':relVal},
                      success:function (data){
                        $('#mask2').hide();

                        $('#loading-window').hide();

                        $("[id*="+div+"]").children().children().find("table").html("");

                        load_elementary();




                      }     
               });



       });


function load_elementary(){ 
       var html;

                $.ajax({
                          type:'POST',
                          url:'add_subject.php',
                     dataType:'json',
                         data:{'func_numbr':'2'},
                      success:function (data){
                        var activator;

                        var disabler;
                         var counter_sub = 0 ;

                         $.each(data, function(i, item) {

                          if(data[i].subj_status == "0"){

                            classToAddInactve = "inactiveButton";
                            DisableInactve = "disabled=\"disabled\""
                            classToAddActve   = "";
                            DisableActve = ""
                           }

                           else{

                            classToAddInactve = ""
                             DisableInactve = ""
                             classToAddActve   = "inactiveButton";
                             DisableActve = "disabled=\"disabled\""
                           }




                          html = "<tr>";

                          html += "<td><lable>Subject: </label><input type='text' name='subject["+counter_sub+"]' rel='"+data[i].subj_id+"' value='"+data[i].subj_name+"' readonly='readonly'></td>";
                          html += "<td><input type='button' rel='#loading-window' id='activate["+counter_sub+"]' name='active' class='button active modal2 "+classToAddActve+"' value='Apply' "+DisableActve+"> ";
                          html += "<input type='button' rel='#loading-window' id='inactivate["+counter_sub+"]' name='active' class='button inactive modal2 "+classToAddInactve+"' value='Remove from list' "+DisableInactve+"></td>";
                          html += "</tr>";

                 $('#curr-elem-tble').append(html);

                 counter_sub = counter_sub +1;
                });
                      }     
               });
}

load_elementary（）;

Answer 1

HTMLマークアップに関するいくつかのコメント。

1. マークアップを制御できると仮定して、含まれているdivと動的テーブルにクラスを追加して作業を楽にします。
2. 現在、要素が要素<label>として定義されて<lable>いるため、長期的には問題が発生する可能性があります（<label>代わりに自由に呼び出すことができます）。
3. name属性の値が同じであるすべてのボタンに本当にポイントがありますか？
4. 属性について言えばname...実際に<input type="submit">またはを使用してフォームを投稿する場合を除いて、属性を.submit()使用しない方がよいでしょうname。JavaScriptでは事実上役に立たない（ラジオボタンがない限り、コードを使用せずにコードを書くためのはるかに効率的な方法があるので...それはまったく別の話です）。

HTML：

<div id="curr-elem" class="container">
    <div class="box-header">
        <h3>Elementary Subject</h3>
    </div>
    <div id="curr-elem-content">
        <table id="curr-elem-tble" class="dynamic-table">
            <tr>
                <td>
                    <label for="subject_0">Subject:</label>
                    <input type="text" id="subject_0" name="subject[0]" readonly="readonly" value="a" rel="1">
                </td>
                <td>
                    <input type="button" id="activate_0" name="active" class="button active modal2 inactiveButton" disabled="disabled" value="Apply" rel="#loading-window">
                    <input type="button" id="inactivate_0" name="active" class="button inactive modal2" value="Remove from list" rel="#loading-window">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="subject_1">Subject:</label>
                    <input type="text" id="subject_1" name="subject[1]" readonly="readonly" value="ssssss" rel="8">
                </td>
                <td>
                    <input type="button" id="activate_1" name="active" class="button active modal2 inactiveButton" disabled="disabled" value="Apply" rel="#loading-window">
                    <input type="button" id="inactivate_1" name="active" class="button inactive modal2" value="Remove from list" rel="#loading-window">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="subject_2">Subject:</label>
                    <input type="text" id="subject_2" name="subject[2]" readonly="readonly" value="alvin" rel="9">
                </td>
                <td>
                    <input type="button" id="activate_2" name="active" class="button active modal2 inactiveButton" disabled="disabled" value="Apply" rel="#loading-window">
                    <input type="button" id="inactivate_2" name="active" class="button inactive modal2" value="Remove from list" rel="#loading-window">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="subject_3">Subject:</label>
                    <input type="text" id="subject_3" name="subject[3]" readonly="readonly" value="ronniel" rel="10">
                </td>
                <td>
                    <input type="button" id="activate_3" name="active" class="button active modal2 inactiveButton" disabled="disabled" value="Apply" rel="#loading-window">
                    <input type="button" id="inactivate_3" name="active" class="button inactive modal2" value="Remove from list" rel="#loading-window">
                </td>
            </tr>
        </table>
    </div>
</div>

JavaScriptについて：

1. .live() jQuery1.7で非推奨になりました。.on()1.7以上を使用している場合に使用する必要があります。下位バージョンを使用している場合は、.delegate()代わりに使用する必要があります。を使用しない理由はいくつかあります.live()。
2. 一般的に、関数を使用する前に関数を定義することをお勧めします。ここではAJAXを使用しているので大したことではありませんが、そのようなコードを書き始めたいと思うかもしれません。
3. 一般的に、手作業でHTML文字列を作成してから、.innerHTMLプロパティまたはjQuery.html()メソッドを使用するのではなく、DOM要素を実際の要素として作成してから追加する必要があります。文字列連結の長いチェーンは乱雑になり、間違いを犯しやすくなります（jQueryを使用すると、実際の要素の構築はかなり簡単になります）。

JavaScript：

//define load_elementary function
var load_elementary = function load_elementary(table) {
    $.ajax({
        "type": "POST",
        "url": "add_subject.php",
        "dataType": "json",
        "data": {
            "func_numbr": "2"
        },
        "success": function (data, textStatus, jqXHR) {
            var tbody = $('<tbody />'),
                tr = $('<tr />'),
                td = $('<td />'),
                counter_sub = 0;
            $.each(data, function (i, item) {
                var label = $('<label />'),
                    textbox = $('<input />').attr('type', 'text').prop('readonly', true),
                    button = $('<input />').attr('type', 'button'),
                    row = tr.clone(),
                    cell = td.clone(),
                    subjIsNotActive = data[i].subj_status !== "0",
                    subjIsActive = !subjIsNotActive;
                //make first cell
                cell.append(label.attr('for', 'subject_' + counter_sub).text('Subject: '));
                cell.append(textbox.attr({
                    "id": "subject_" + counter_sub,
                    "name": "subject[" + counter_sub + "]",
                    "rel": data[i].subj_id
                }).val(data[i].subj_name));
                //append first cell
                row.append(cell);
                //make second cell
                cell = td.clone();
                cell.append(button.addClass('button active modal2').toggleClass('inactiveButton', subjIsNotActive).prop('disabled', subjIsNotActive).attr({
                    "id": "activate_" + counter_sub,
                    "name": "active",
                    "rel": "#loading-window"
                }).val('Apply'));
                cell.append(button.addClass('button inactive modal2').toggleClass('inactiveButton', subjIsActive).prop('disabled', subjIsActive).attr({
                    "id": "inactivate_" + counter_sub,
                    "name": "active",
                    "rel": "#loading-window"
                }).val('Remove from list'));
                //append second cell
                row.append(cell);
                //append row to tbody
                tbody.append(row);
                counter_sub += 1;
            });
            //empty current contents and then append tbody to table
            table.empty().append(tbody);
        }
    });
};
//add click handlers
$('.active').on('click', function () {
    var self = $(this),
        subj = self.parent().prev().find('input[type=text]'),
        text = subj.val(),
        rel = subj.attr('rel'),
        container = self.parents('div.container');
    $.ajax({
        "type": "POST",
        "url": "add_subject.php",
        "dataType": 'json',
        "data": {
            "func_numbr": "7",
            "subjct_name": text,
            "subjct_id": rel
        },
        "success": function (data, textStatus, jqXHR) {
            var table = container.find('table.dynamic-table');
            $('#mask2').hide();
            $('#loading-window').hide();
            load_elementary(table);
        }
    });
});