Keyup Event Handler в динамически добавленных элементах - PullRequest
Новая
       14

Keyup Event Handler в динамически добавленных элементах

0 голосов
/ 12 апреля 2019

«Всего» ввод не работает в добавленных элементов! Работает только в первом ряду! Любая помощь, пожалуйста? .................................................. .................................................. .................................................. .......... 

$(document).ready(function(){



	$('input').on('keyup', function () {
	$('#total').val($('#price').val() * $('#qua').val());
	});


	var i=1;
	$('#add_input').click( function(){

		var newInput = $('<tr id="row'+i+'"><div><td><input type="text" name="type[]" placeholder="Select Product"/></td><td><input type="text" name="des[]" placeholder="Product Description"/></td><td><input type="text" name="qua[]" id="qua" placeholder="Quantity"/></td><td><input type="text" name="price[]" id="price" placeholder="Price"/></td><td><input type="text" name="total[]" id="total" placeholder="Total" readonly/></td><td><button type="button" name="remove" id="'+i+'" class="btn_remove">Remove</button></td></div></tr>');

		i++;
		$('#dynamic').append(newInput);


	});



	$(document).on('click', '.btn_remove', function(){
		var button_id = $(this).attr("id");
		$('#row'+button_id+'').remove();
	});


	$('#submit').click(function(){
		$.ajax({
			url:"insert.php",
			method:"POST",
			data:$('#add_me').serialize(),
			success: function(data)
			{
				alert(data);
				$('#add_me')[0].reset();
			}
		});
	});

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<h1>Testing</h1>
<form name="add_me" id="add_me">
<table id="dynamic">
	<tr>
		<td><input type="text" name="type" placeholder="Select Product"/></td>
		<td><input type="text" name="des" placeholder="Product Description"/></td>
		<td><input type="text" name="qua" id="qua" placeholder="Quantity"/></td>
		<td><input type="text" name="price" id="price" placeholder="Price"/></td>
		<td><input type="text" name="total" id="total" placeholder="Total" readonly/></td>

	</tr>
	<button type="button" name="add" id="add_input">Add</button>
</table>
<input type="button" name="submit" id="submit" value="Submit"/>
</form>
</body>

Ответы [ 2 ]

0 голосов
/ 12 апреля 2019

Причина в том, что у вашего нового tr нет привязанного к нему события.Решение: Наличие невидимого шаблона строки после таблицы с классом вместо идентификатора во входных тегах: 

  <div style="display:none">
   <tr id="row_template">
    <td><input type="text" name="type" placeholder="Select Product"/></td>
    <td><input type="text" name="des" placeholder="Product Description"/></td>
    <td><input type="text" name="qua" class="qua" placeholder="Quantity"/></td>
    <td><input type="text" name="price" class="price" placeholder="Price"/></td>
    <td><input type="text" name="total" class="total" placeholder="Total" readonly/></td>
<td><button type="button" name="remove" class="btn_remove">Remove</button></td>
    </tr> 
  </div>

И в вашем js: 

 $('input.price,input.qua').on('keyup', function () {
 var parent_tr = $(this).closest('tr');
 parent_tr.find('.total').val(parent_tr.find('.price').val() * parent_tr.find('.qua').val());
 });

 var i=1;

    $('#add_input').click( function(){

    //to copy the template tr with its binding events (.on('keyup')...) :
    var newInput = $('#row_template').clone(true).attr("id",i);

    i++;

    $('#dynamic').append(newInput);
    });

 $(document).on('click', '.btn_remove', function(){
     $(this).closest("tr").remove();
});
0 голосов
/ 12 апреля 2019 
$('body').on('input', 'keyup', function () {
  var price = $(this).closest('tr').find('[data-price]').val();
  var qua = $(this).closest('tr').find('[data-qua]').val();
  $(this).closest('tr').find('[data-total]').val( price * qua );
});

Потому что js запускается один раз после запуска страницы и создания событий. Для использования с динамически добавленным событием, вы должны создать событие для родителя (я обычно использую $('body'))

также идентификатор должен быть уникальным, так что лучше быть 

var newInput = $('<tr id="row'+i+'"><div><td><input type="text" name="type[]" placeholder="Select Product"/></td><td><input type="text" name="des[]" placeholder="Product Description"/></td><td><input type="text" name="qua[]" data-qua='' placeholder="Quantity"/></td><td><input type="text" name="price[]" data-price='' placeholder="Price"/></td><td><input type="text" name="total[]" data-total='' placeholder="Total" readonly/></td><td><button type="button" name="remove" id="'+i+'" class="btn_remove">Remove</button></td></div></tr>');

<table id="dynamic">
<tr>
    <td><input type="text" name="type" placeholder="Select Product"/></td>
    <td><input type="text" name="des" placeholder="Product Description"/></td>
    <td><input type="text" name="qua" data-qua='' placeholder="Quantity"/></td>
    <td><input type="text" name="price" data-price='' placeholder="Price"/></td>
    <td><input type="text" name="total" data-total='' placeholder="Total" readonly/></td>

</tr>
<button type="button" name="add" id="add_input">Add</button>

...