jquery - 遍历不工作在 div 内的表

Question

我试图使用 .children() 清空 div 中的表，然后附加 ajax 的新结果，但我的遍历不起作用。我的 tr 是使用带有另一个函数的 ajax 动态创建的，以便我在 click 的成功 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>

阿贾克斯：

  $('.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;
                });
                      }     
               });
}

加载元素（）；

Answer 1

对您的 HTML 标记的一些评论。

1. 假设您可以控制标记，通过向包含的 div 和动态表添加类来让您的生活更轻松。
2. 您<label>当前将元素定义为<lable>元素，从长远来看可能会导致问题（我冒昧地调用它们<label>）。
3. name每个按钮的属性值都相同吗？
4. 说到name属性...除非您实际上要使用 a<input type="submit">或 a发布表单.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() 自 jQuery 1.7 起已弃用。.on()如果您使用的是 1.7 或更高版本，则应该使用。如果您使用的是较低版本，则应.delegate()改为使用。不使用的原因有很多.live()。
2. 一般来说，在使用函数之前定义函数是一种很好的做法。由于您在这里使用 AJAX，这没什么大不了的，但您可能希望开始编写这样的代码。
3. 一般来说，您应该将 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);
        }
    });
});