遍历不在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>

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：

从jQuery 1.7开始，
1. .live() is deprecated。如果您使用1.7或更高版本，则应使用.on()。如果您使用的是较低版本，则应使用.delegate()代替。有several reasons不使用.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);
        }
    });
});