动态添加到表中的按钮不起作用 Jquery [重复]

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'）匹配的子级，当匹配时，它将针对子级处理事件，就好像它已直接绑定到它一样。