추가/삭제 버튼에 대한 jQuery가 작동하지 않습니다.

Question

내 고객 중 한 명은 필요에 따라 문의 양식을 개발했습니다. 입력 할 데이터는 행을 증가 또는 감소시킬 수 있도록 동적 양식을 설계 한 배수 여야합니다. 양식의 추가 버튼이 제대로 작동하지만 삭제 버튼이 작동하지 않습니다.

DEMO을 확인하십시오. 코드는 아래와 같습니다.

나는 방법의 수에 노력하고 인터넷 검색했지만 소용

$(document).ready(function() { 
 
    var max_fields = 10; //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 
 
     $(wrapper).append('<div><input type="text" class="i" name="sl[]"><input type="text" class="l" name="item[]"><input type="text" class="j" name="unit[]"><input type="text" class="j" name="qty[]"/>&nbsp;<a href="#" class="remove_field">X</a></div>'); 
 

 
     //add input box 
 
    } 
 
    }); 
 

 
    $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text 
 
    e.preventDefault(); 
 
    $(this).parent('div').remove(); 
 
    x--; 
 
    }) 
 
}); 
 
    
 
$(document).ready(function() { 
 
    $(".datepicker").datepicker({ 
 
    dateFormat: 'dd-M-yy' 
 
    }); 
 
});

.k input { 
 
    width: 95px; 
 
    margin: 2px; 
 
} 
 
.i { 
 
    width: 40px; 
 
    margin: 3px; 
 
    text-align: center; 
 
} 
 
.l { 
 
    width: 390px; 
 
    margin: 3px; 
 
    text-align: left; 
 
} 
 
.j { 
 
    width: 95px; 
 
    margin: 3px; 
 
    text-align: center; 
 
} 
 
.m { 
 
    padding: 10px; 
 
    margin: 5px; 
 
    font-weight: bold; 
 
    line-height: 25px; 
 
}

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
 

 
<form method="post" action="xxx/enq.php"> 
 
    <label>Name:</label> 
 
    <input type="text" name="com" /> 
 
    <label>Required at:</label> 
 
    <input type="text" name="req2" /> 
 
    <label>Location:</label> 
 
    <input type="text" name="place" /> 
 
    <label>Required Dt:</label> 
 
    <input type="text" name="req1" class="datepicker" /> 
 

 
    <div class="input_fields_wrap"> 
 
    <table> 
 
     <tr> 
 
     <td class="i">SL</td> 
 
     <td class="l">ITEM DESCRIPTION</td> 
 
     <td class="j">UNIT</td> 
 
     <td class="j">QTY</td</tr> 
 
    </table> 
 
    <input type="text" class="i" name="sl[]"> 
 
    <input type="text" class="l" name="item[]"> 
 
    <input type="text" class="j" name="unit[]"> 
 
    <input type="text" class="j" name="qty[]"> 
 
    <button class="add_field_button">+</button> 
 
    </div> 
 

 
    <input type="submit" name='submit' onclick="show_confirm()" value="SUBMIT"> 
 
    <input type="reset" value="CLEAR"> 
 
</form>

.

Answer 1

변경 채워진 필드 삭제 버튼의

$(body).on("click", ".remove_field", function(e) { //user click on remove text 
e.preventDefault(); 
$(this).parent('div').remove(); 
x--; 
})