Question

我有一个动态创建的表格，每一行都有一个清除该行的按钮。该按钮在第一行中工作正常，但在接下来的行中不执行任何操作。为了解决这个问题，我将按钮设置为在单击时提醒我，但只有第一个按钮正在注册。

我已将按钮更改为ID和Class，但这似乎也不起作用。

代码如下：

 //dynamically create 4 rows
 $(document).ready(function(){
	var rowsAdd = $('#addTable tbody >tr');
	var rA = rowsAdd.length;
	while (rA<5) {
		$('#addTable tbody>tr:last').clone().insertAfter('#addTable tbody>tr:last');
		rA++;
	}
})

 //alert on button click
 $('.clear').each(function(index){
 	$(this).on("click",function(){
		alert("Button " +index+ " is clicked");
	});
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="addTable">
        <tbody>
          <tr>
            <th style="width: 10%">Class #</th>
            <th style="width: 30%;">Course Title</th>
            <th style="width: 20%;">Catalog Number</th>

			<th></th>
          </tr>
		 
		 <div class="addTable">
          <tr>
			<td class="classNumID"></td>
			<td>
			<input list="courses" name="courseInput" placeholder="Course" class="courseClass" oninput="UpdateCatNumbers()">
				  <datalist id="courses" name="courseDatalist">
					<!--Filled in script-->					
				  </datalist>
			</td>
          <td>
		  <input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" class="catClass" oninput="UpdateCourseNames()">
				  <datalist id="catalogs" name="catalogDatalist">
					<!--Filled in script-->
				  </datalist>
				  </td>
			<td><button class="clear">−</button></td>
          </tr>
		  </div>

Answer 1

如重复文章中所述，您可以使用委托事件绑定来绑定页面加载时存在的父元素，该父元素将侦听未来子级的事件并在事件发生时进行处理。

$('#addTable').on('click', '.clear', function(e){
  alert('button clicked', this);
});

元素将添加到页面加载时存在的addTable中。当任何（未来）子类别为“清除”的孩子发生点击事件时，该点击事件将冒泡给父对象。父级将检查该事件是否源自与该选择器（.clear）相匹配的子级，当匹配时，它将针对该子级处理该事件，就好像该事件已直接绑定到该子级。

动态添加到表中的按钮不起作用Jquery

1 个答案: