DOM에 새로 삽입 된 요소 속성 수정시 문제가 발생했습니다

Question

다음과 같이 click 이벤트에서 호출되는 버튼에 대한 함수가 있습니다. 한 번 클릭하면 요소의 복사본이 클릭 한 버튼의 행 바로 다음에 삽입됩니다. 변경해야합니다. 새롭게 삽입 된 행의 일부 요소의 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 기능 : I는 경고가 chaned 값을 보여주는 소자의 ID 및 이름을 수정 한 후() 경보 확인되지만 경우

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--; 
    }); 

는 DOM은 변경되지 않는다. 뿐만 아니라

뿐인https://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는 첫 번째 요소와 그 요소의 내부를 찾아야합니다. 얼마나 많은 자식을 트래버스해야하는지에 상관없이 지정된 두 번째 요소를 찾은 다음 세 번째 요소를 찾습니다. 존재한다면, 등등). prop 메서드의 중괄호 표기법은 JQuery에 여러 소품을 객체의 형태로 업데이트하도록 전달한다는 것을 알려줍니다.