遍历不能遍历div中的表

Question

我正在尝试使用.children()清空div中的一个表，然后附加ajax的新结果，但是我的遍历不起作用。我的tr是使用ajax和另一个函数动态创建的，因此我在click的success ajax中调用该函数来再次重新加载请求，使其类似于再次重新加载div。请帮帮大家..

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. 假设您已经控制了标记，可以通过向包含的

和动态表中添加类来简化您的工作。

1. 您的<label>元素当前定义为<lable>元素，从长远来看，这可能会导致问题(我冒失地将它们称为<label> )。
2. 确实在每个按钮中都有一个与<代码>D12
3. Speaking >属性的<代码>D9 div具有相同值的点...除非您实际上要使用<input type="submit">或.submit()发布表单，否则最好不要使用name属性。它在JavaScript中几乎是无用的(因为有更有效的方法来编写代码而不使用它，除非你有单选按钮……那就是另一回事了altogether).

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() is deprecated从jQuery 1.7.开始。如果您使用的是1.7或更高版本，则应使用.on()。如果您使用的是较低版本，则应改用.delegate()。从.live().
2. Generally的角度来看，有一些several reasons是不能使用的，最好在使用函数之前先定义它们。既然您在这里使用AJAX，这不是什么大问题，但是您可能希望像that.
3. Generally那样开始编写代码，您应该将DOM元素构建为实际的元素，然后追加它们，而不是手动构建一个HTML，然后使用.innerHTML属性或jQuery .html()方法。长的字符串连接链变得杂乱无章，而且很容易出错(而且使用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);
        }
    });
});