HTML jquery：删除动态表行的onclick函数未调用

Question

我只想删除动态创建的行，但是我无法使用 jquery 和 javascript 调用该函数。

const dynamic_JS = ({ sno, optionVal, price }) => `<tr><td>${sno}</td>  <td><select name="selectProduct" class="form-control" selected="${optionVal}"><option value="0"> -- Select One --</option><option value="1"> IPhone </option><option value="2"> MAC </option><option value="3"> Windows </option></select></td>  <td><input type="text" class="form-control" value="${price}" title="" ></td>  <td><button type="button" class="remove-row btn btn-info glyphicon glyphicon-remove" ></button></td>  </tr>`;

// onclick=\'removeRow(this)\'
//window.onload=function(){}
$(document).ready(function() {
	var template_add = $('#hidden-template').text();
	function render(props) {
	  return function(tok, i) {
		return (i % 2) ? props[tok] : tok;
	  };
	}
	var items = [  { sno: '1', optionVal: '0', price: '0' }  ];
	var dynamic_HTML = template_add.split(/\$\{(.+?)\}/g);

	$('tbody').append(items.map(function(item) {
	return dynamic_HTML.map(render(item)).join('');
	}));

});

// https://stackoverflow.com/a/35592412/5081877
$('#number_only').on('input propertychange', function() {
	this.value = this.value.replace(/[^0-9]/g, '');
});


$('.add-new').on('click', function () {
  $("#productTable").each(function () {

	var tr_last = $('tbody > tr:last', this).clone();
	var td_no = tr_last.find('td:first');
	var serialNumber = parseInt(td_no.text()) + 1;


	// https://stackoverflow.com/a/6588327/5081877
	var tr_first_input = $('tbody > tr:first > td:nth-child(3) > input');
	var tr_first_price = parseFloat(tr_first_input.val()) || 0;
	console.dir( tr_first_price );
	
	totalamount += tr_first_price;
	$('#totalAdd').text(totalamount);

	var tr_first_selected = $('tbody > tr:first > td:nth-child(2) > select option').filter(":selected");
	// option:selected | .find(":selected") ~ .text(), ~.attr('value');
	var selectedValue = tr_first_selected.val(), optionText = tr_first_selected.text().trim();
	console.log(' Text : ', optionText );
	console.log('Value : ', selectedValue );

	// https://stackoverflow.com/a/39065147/5081877
	$('tbody', this).append([
	  { sno: serialNumber, optionVal: selectedValue, price: tr_first_price }
	].map(dynamic_JS).join(''));

	var last_optionSel = $('tbody#mainBody > tr:last > td:nth-child(2) > select');
	last_optionSel.val( selectedValue );
	
	tr_first_input.val( 0 );
	
	// https://stackoverflow.com/a/13089959/5081877
	var first_optionSel = $('#productOption');
  //$('tbody > tr:first > td:nth-child(2) > select ');
	first_optionSel.val( 0 );

    return;
  });
});


var totalamount = 0; // tr#mainRow
 $('table#productTable > tbody ').on('keyup', 'input', function(e) {
   var total =
    $(e.delegateTarget)
    .find('input')
    .map(function() {
      return parseFloat($(this).val()) || 0;
    })
    .get()
    .reduce(function(a, b) {
      return a + b;
    });
   
	$('#total').text(total);
});

<!-- Remove row - javascript & Jquery -->

$('.remove-row').on('click', function () {
	$("#productTable").each(function () {
  // added total minus deleting element price.
		$(this).closest('tr').remove();
	});
});

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<table id="productTable" class="table table-hover table-bordered">
  <thead>
    <tr>
      <th>No.</th><th>Product</th><th>Price</th><th>Action</th>
    </tr>
  </thead>
  <tbody id="mainBody">
    
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td>
      Expected Total:<span id="total">0</span><br>
      Added Total:<span id="totalAdd">0</span>
     </td>
      <td></td>
    </tr>
  </tfoot>
</table>

<button type="button" class="add-new btn btn-info" id="add-new">Add New Income</button>

<script id="hidden-template" type="text/x-custom-template">
  <tr id="mainRow">
	<td>${sno}</td>
	<td>
		<select name="selectProduct" id="productOption" class="form-control" selected="${optionVal}">
		<option value="0"> -- Select One --</option>
		<option value="1"> IPhone </option>
		<option value="2"> MAC </option>
		<option value="3"> Windows </option>
		</select>
	</td>
	<td>
		<input id="number_only" pattern="[0-9]" type="text" class="form-control" />
	</td>
	<td><!-- glyphicon-plus | glyphicon-remove -->
		<button type="button" class="add-new btn btn-info glyphicon glyphicon-plus"></button>
	</td>
  </tr>
</script>
</body>

Stackoverflow sn-p - 使用 javascript onclick function 删除当前行工作正常。

function removeRow(onclickTAG) {
    // Iterate till we find TR tag. 
    while ( (onclickTAG = onclickTAG.parentElement)  && onclickTAG.tagName != 'TR' );
            onclickTAG.parentElement.removeChild(onclickTAG);
}

作为jsfiddle - test 和平面 html 文件的一部分，代码至少不能使用 javascript。

1. 无法删除|调用删除行函数。删除行时，从Added Total 中删除价格。
2. 我应该只允许输入标签的数字，但它只适用于第一行输入元素。 Input type must be text only. type number allows these like {.+-}

我无法将它作为 jquery 及其 xpath 元素导航的新手来解决。

Answer 1

您的代码有两个问题：

$('table#productTable:.remove-row').on('click', function () {

这里:. 是一个语法错误，它显示在控制台中。

其次要在动态html上放置一个事件监听器，你必须使用$(document).on() like：

$(document).on('click', '.remove-row', function(){

检查更新的工作小提琴 here

Answer 2

我使用on click 事件处理程序添加了事件，因为元素是动态添加的。

更新了两个事件： 1. 移除按钮事件

$('table#productTable').on('click', '.remove-row', function() {
  //$("#productTable").each(function () {
  // added total minus deleting element price.
  $(this).closest('tr').remove(); // https://stackoverflow.com/a/11553788/5081877
  //$(element).parent().remove();
  //});
});

2。输入标签的事件

$('table#productTable').on('input propertychange',' > tbody > tr > td:nth-child(3) > input', function() {
  $.each($('input[type=text]'), function() {
    this.value = this.value.replace(/[^0-9]/g, '');
  });
});

参考这个fiddle

Answer 3

请把$('.row).onclick改成这样

$('table#productTable').on('click', '.remove-row', function()

然后删除这个$("#productTable").each(function () {