jQuery动态添加多个元素后,绑定事件全部触发的解决办法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/shangcunshanfu/article/details/78917146

这个解决办法非常简单,而且我也深深地意识到这篇文章不会写太长,因为真的很简单。

首先来看一下例子:




for (var i = 0; i < 5; i++) {
								$tr += "<tr>" + "<td>" + (i + 1) + "</td>"
										//此处是非关键代码
											+ "<td>"
											+ "<input type='button' name='paySinglePchsSheet' class='paySinglePchsSheet'"
											+ " value='付款'/>"
											+ "</td>";
									$("#forPchsAcctSection").on(
											"click",
											paySinglePchsSheet);
								}
								$tr += "</tr>";
							}
							$goodsTable.empty();
							$goodsTable.append($tr);
function paySinglePchsSheet() {
							alert("单笔付款");
						}

代码中动态添加了一个button,并且给这个button绑定了一个click事件,for循环执行五次,所以是添加了五个绑定有click事件的button按钮。当我产点击付款的时候,会发现Duang Duang Duang弹出五次单笔付款的alert()来,这里是用alert()用测试。而真正的业务不可能是这样,明明是单笔付款,Duang Duang Duang付了五次,那老板哭了。
把代码写成下面这样,用id去指定一下(id也是动态生成的)。



for (var i = 0; i < 5; i++) {
								$tr += "<tr>" + "<td>" + (i + 1) + "</td>"
										//此处是非关键代码
											+ "<td>"
											+ "<input type='button' name='paySinglePchsSheet' class='paySinglePchsSheet'"
											+ "id=pay"+i
											+ " value='付款'/>"
											+ "</td>";
									$("#forPchsAcctSection").on(
											"click",
											"#pay"+i,
											paySinglePchsSheet);
								}
								$tr += "</tr>";
							}
							$goodsTable.empty();
							$goodsTable.append($tr);

这样就生成了id为pay1 pay2 pay3 pay4 pay0的五个button,并且在绑定事件的时候对触发事件的元素进行了委托,这时候再点击付款,就会发现只弹出一次。突然心里好高兴的样子。
大家还在以把测试代码改成alert($(this).attr("id"));来验证一下是不是你点击的那个button。
完了,是不是很简单。


展开阅读全文

没有更多推荐了,返回首页