DOM内に新しく挿入された要素プロパティの変更に関する問題

Question

このようなクリックイベントで呼び出されるボタン用の関数があります。クリックすると、クリックされたボタンの行の直後に要素のコピーが挿入されます。新しく挿入された行のいくつかの要素のIDと名前。

<tr class="tr_38"> 
     <td>Maths [ Math01 ]</td> 
     <td>Required</td> 
     <td> 
      <select style="width: 250px;" name="TeacherID[2318]" id="TeacherID[2318]"> 
      <option selected="" value="132">Dawn Herus - [ID : 132]</option> 
      <option value="246">Margaret Wilson - [ID : 246]</option> 
      </select> 
     </td> 
     <td> 
      <input class="date hasDatepicker" id="ExamDate_2318" name="ExamDate[2318]" value="02/28/2017" type="text"> 
      <input style="width: 100px;" id="ExamTime_2318" name="ExamTime[2318]" value="8:00" type="text"> 
     </td> 
     <td><input value="+" class="more-38-0 more_button" type="button"> 
     </td> 
     </tr> 

jQueryの機能：

var counter = -1; 
    $(document).on ('click','.more_button',function(){ 
     var courseID=''; 
     var row_classname = $(this).closest('tr').prop('class'); 
     $.each($(this).prop('class').split(' '), function(i, name) { 
      if (name.indexOf('more-') > -1) { 
       courseID = name.split('-')[1]; 
       return false; 
      } 
     }); 
      var newrow = '<tr class="'+row_classname+'"><td>'+$(this).parent().parent().find('td:eq(0)').text()+ 
      '</td><td>'+$(this).parent().parent().find('td:eq(1)').text()+ 
      '</td><td>'+$(this).parent().parent().find('td:eq(2)').html()+'</td><td>'+ 
      $(this).parent().parent().find('td:eq(3)').html()+'</td><td><input type="button" value="+" class="more-'+ 
      courseID+'-1 more_button"><input type="button" class="remove" value="X">'+ 
      '</td></tr>'; 

      $newrow = $(newrow); 
      $(newrow).insertAfter($(this).closest('tr')); 
      $newrow.find('td:eq(2)').find('select').prop('id','TeacherID['+counter+']');//.prop('name','TeacherID['+counter+']'); 
      alert($newrow.find('td:eq(2)').html()); 
      $newrow.find('td:eq(3)').find('input[id^="ExamDate_"]').prop('id','ExamDate_'+counter).prop('name','ExamDate['+counter+']'); 
      $newrow.find('td:eq(3)').find('input[id^="ExamTime_"]').prop('id','ExamTime_'+counter).prop('name','ExamTime['+counter+']'); 
      alert($newrow.find('td:eq(3)').html()); 
      $(this).hide(); 
      counter--; 
    }); 

私は警告をチェック（）要素のIDと名前を変更した後、アラートがchaned値を示しているが、DOMは変更されません。同様

FIDDLEhttps://jsfiddle.net/anazvak/r3qhokqn/6/

Answer 1

var counter = -1; 
 
     $(document).on ('click','.more_button',function(){ 
 
      var courseID=''; 
 
      var row_classname = $(this).closest('tr').prop('class'); 
 
      $.each($(this).prop('class').split(' '), function(i, name) { 
 
       if (name.indexOf('more-') > -1) { // or name.indexOf('toaster') === 0 
 
        courseID = name.split('-')[1]; 
 
        return false; 
 
       } 
 
      }); 
 
       var newrow = $('<tr class="'+row_classname+'"><td>'+$(this).parent().parent().find('td:eq(0)').text()+ 
 
       '</td><td>'+$(this).parent().parent().find('td:eq(1)').text()+ 
 
       '</td><td>'+$(this).parent().parent().find('td:eq(2)').html()+'</td><td>'+ 
 
       $(this).parent().parent().find('td:eq(3)').html()+'</td><td><input type="button" value="+" class="more-'+ 
 
       courseID+'-1 more_button"><input type="button" class="remove" value="X">'+ 
 
       '</td></tr>'); 
 
       var $newrow = $(newrow); 
 
\t $newrow.find('td:eq(2)').find('select').prop('id','TeacherID['+counter+']').prop('name','TeacherID['+counter+']'); 
 
       //alert($newrow.find('td:eq(2)').html()); 
 
       $newrow.find('td:eq(3)').find('input[id^="ExamDate_"]').prop('id','ExamDate_'+counter).prop('name','ExamDate['+counter+']'); 
 
       $newrow.find('td:eq(3)').find('input[id^="ExamTime_"]').prop('id','ExamTime_'+counter).prop('name','ExamTime['+counter+']'); 
 
       $(newrow).insertAfter($(this).closest('tr')); 
 
       $(this).hide(); 
 
       counter--; 
 
     }); 
 
     
 
     $(document).on ('click','.remove',function(){ 
 
      var length = 0; 
 
      $('.'+$(this).closest('tr').prop('class')).not(this.closest('tr')).each(function(){ 
 
       if($(this).find('td:eq(4)').find('.more_button:visible').length) 
 
       { 
 
        length += $(this).find('td:eq(4)').find('.more_button:visible').length; 
 
       } 
 
      }); 
 
      if(length == 0) 
 
      { 
 
       $(this).closest('tr').prev('tr').find('td:eq(4)').find(':hidden').show(); 
 
       $(this).closest('tr').remove(); 
 
      } 
 
      else 
 
      { 
 
       $(this).closest('tr').remove(); 
 
      } 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr class="tr_38"> 
 
                <td>Maths [ Math01 ]</td> 
 
                <td>Required</td> 
 
                <td> 
 
                 <select style="width: 250px;" name="TeacherID[2318]" id="TeacherID[2318]"><option selected="" value="132">Dawn Herus - [ID : 132]</option><option value="246">Margaret Wilson - [ID : 246]</option></select> 
 
                </td> 
 
                <td> 
 
                 <input class="date hasDatepicker" id="ExamDate_2318" name="ExamDate[2318]" value="02/28/2017" type="text"> 
 
                 <input style="width: 100px;" id="ExamTime_2318" name="ExamTime[2318]" value="8:00" type="text"> 
 
                </td> 
 
                <td><input value="+" class="more-38-0 more_button" type="button"></td> 
 
               </tr> 
 
               <tr class="tr_290"> 
 
                <td>Arabic 2 [ Arab 2 ]</td> 
 
                <td>Elective</td> 
 
                <td> 
 
                 <select style="width: 250px;" name="TeacherID[2326]" id="TeacherID[2326]"></select> 
 
                </td> 
 
                <td> 
 
                 <input class="date hasDatepicker" id="ExamDate_2326" name="ExamDate[2326]" value="02/28/2017" type="text"> 
 
                 <input style="width: 100px;" id="ExamTime_2326" name="ExamTime[2326]" value="8:00" type="text"> 
 
                </td> 
 
                <td><input value="+" class="more-290-0 more_button" type="button"></td> 
 
               </tr> 
 
</table>

フィドル：https://jsfiddle.net/HappyiPhone/r3qhokqn/7/

はそれが役に立てば幸い！

Answer 2

あなたのロジックにはまだ問題があると思いますが、これは適切なトラックで開始され、コードの一部がクリーンアップされるはずです。

は、このいずれかであなたの.more_button機能を交換して：あなたはちょうどあなたがjQueryのcloneメソッドを持つ要素を再作成するためにあなたのロジックを置き換えることができDOMにすでにだ要素をコピーしているので

$(document).on ('click','.more_button',function(){ 
    var courseID=''; 
    var row_classname = $(this).closest('tr').prop('class'); 
    $.each($(this).prop('class').split(' '), function(i, name) { 
     if (name.indexOf('more-') > -1) { // or name.indexOf('toaster') === 0 
      courseID = name.split('-')[1]; 
      return false; 
     } 
    }); 

    var closestTr = $(this).closest('tr'); 
    var newrow = closestTr.clone(); 

    $(newrow).insertAfter(closestTr); 

    var $newrow = $($(closestTr).next()); // Get the row you just added 

    // set the id and name 
    $newrow 
    .find('td:eq(2) select') 
     .prop('id','TeacherID['+counter+']') 
      .prop('name','TeacherID['+counter+']'); 

    alert($newrow 
      .find('td:eq(2)') 
       .html()); 

    $newrow 
    .find('td:eq(3) input[id^="ExamTime_"]') 
     .prop({ 
       'id' : 'ExamTime_'+counter, 
       'name':'ExamTime['+counter+']' 
      }); 

    alert($newrow 
      .find('td:eq(3)') 
      .html()); 

    $(this).hide(); 
    counter--; 
}); 

。新しく複製された行を現在の行の後ろに挿入し、そのプロパティを更新します。

通知findとpropの両方の呼び出しをより簡潔に変更しました。あなたのJQueryセレクタの要素の間にスペースがあると（$(と)の間のもの）、JQueryは、何番目の子をトラバースしても、指定された2番目の要素、3番目の要素存在する場合など）。 propメソッドの中括弧記法は、オブジェクトの形で更新される複数の小道具を渡していることをJQueryに伝えます。