여러 클래스를 대상으로 jQuery 사용

Question

동적으로 선택 입력 폼을 추가 및 제거 할 수있는 jQuery 코드가 있습니다.

$(document).ready(function() { 
    var max_fields = 20; //maximum input boxes allowed 

    var wrapper = $(".input_fields_wrap"); //Fields wrapper 
    var add_button = $(".add_field_button"); //Add button ID 
    var x = 1; //initlal text box count 
    $(add_button).click(function(e) { //on add input button click 
     e.preventDefault(); 
     if (x < max_fields) { //max input box allowed 
     x++; //text box increment 
     $(".aaaa").first().clone().appendTo(".input_fields_wrap"); 
     } 
    }); 
    $(wrapper).on("click", ".remove_field", function(e) { 
     e.preventDefault(); 
     if($(".aaaa").length > 1) { 
     $(this).parent('div').remove(); 
     } else { 
     alert('You can not delete all elements'); 
     } 
    }) 
}); 

많은 클래스 (class="input_field_wrap and etc.")에이 jQuery 코드를 사용하고 싶습니다.

내가 작동하게하는 유일한 방법은 onclick 기능으로 만드는 것입니다.

function createSelect(wrapper, add_button, a) { 
var max_fields = 20; 
var x = 1; 
$(add_button).click(function(e) { //on add input button click 
     e.preventDefault(); 
     if (x < max_fields) { //max input box allowed 
     x++; //text box increment 
     $(".aaaa").first().clone().appendTo(".input_fields_wrap"); 
     } 
    }); 
} 

이것은 작동하지 않습니다.

HTML : 당신은 그냥 신선한 DOM 당신이 .remove_field에 대한 이전의 클릭 이벤트에서와 같이 동적으로 추가 처리하는 이벤트 위임을 on()을 사용했습니다

<div class="input_fields_wrap"> 
         <a href="#" class="add_field_button" >Add Another Prescibed Medication</a> 
         <div class="aaaa"> 
          Prescibed Medication Name: 
          <select class="form-control" name="prescription[]"> 
           <option value="">Select an option</option> 
           <?php 

          foreach($prescription->result() as $row) 
          { 
           echo '<option value="'.$row->id.'">'.$row->name.'</option>'; 
          } 

          ?> 

          </select> 

          <a href="#" class="remove_field">Remove</a> 
         </div> 
        </div> 

Answer 1

, 그것은 것입니다 :

$('body').on('click', '.add_field_button', function(e) { 
    e.preventDefault(); 

    if (x < max_fields) { //max input box allowed 
    x++; //text box increment 
    $(".aaaa").first().clone().appendTo(".input_fields_wrap"); 
    } 
}); 

희망이 도움이됩니다.