循环中绑定click 事件
一、测试的思路
1）定义一个数组
2）遍历数组：生成 button
3）button 的点击事件 输入 数组的值
二、测试代码
<script type="text/javascript">
function fun01(){
let myArr=new Array();
myArr[0]=0;
myArr[1]=1;
myArr[2]=2;
myArr[3]=3;
$.each(myArr,function (index,item) {
let deleteBtn= $("<button></button>").append(item).appendTo($("#conatiner")).addClass("deleteClass");
console.log("index is "+index+" value is "+item);
$(".deleteClass").click(function () {
console.log("funClick -- "+item);
})
});
}
$(function () {
fun01();
})
</script>
三、效果来了。。。。和我的初衷不同，我的初衷是点击0 输出 0
这个就涉及到了 作用域的问题
初始化的log
四、出现问题的原因：是因为作用域 和闭包的问题
五、解决方案：
解决方案一，在循环之外解决这个问题
因为本人的需求是 在事件中拿到 button的 一个属性
所以，
1）在循环中，生成button 的同时，通过 jquery 的 data 方法，绑定了一个属性（就相当于 把需要的值 放在了每个button 中）；
2）在循环之外通过js 的方式绑定一个 click 方法，打印出需要的值
<%--
Created by IntelliJ IDEA.
User: 16221
Date: 2020/3/18
Time: 21:05
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>testEach</title>
<%-- <script src="js/jquery-1.12.4.min.js"></script>--%>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<div id="conatiner"></div>
</body>
<script type="text/javascript">
function fun01(){
let myArr=new Array();
myArr[0]=0;
myArr[1]=1;
myArr[2]=2;
myArr[3]=3;
$.each(myArr,function (index,item) {
let deleteBtn= $("<button></button>").append(item).appendTo($("#conatiner")).addClass("deleteClass");
console.log("index is "+index+" value is "+item);
deleteBtn.data("delete-btn-id",item);
});
//绑定的方式一 jquery方式
/*$(".deleteClass").click(function () {
console.log("funClick -- " + $(this).data("delete-btn-id"));
})*/
//绑定的方式二 原生的js 方式一和方式二效果相同
$(document).on("click",".deleteClass",function () {
console.log("funClick---"+$(this).data("delete-btn-id"));
})
}
$(function () {
alert("hahahah");
fun01();
})
</script>
</html>
这样达到的效果就是 点击每个按钮，出现一次 对应的值
解决方案二，在循环里面解决这个问题
<html>
<head>
<title>testEach</title>
<%-- <script src="js/jquery-1.12.4.min.js"></script>--%>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<div id="conatiner"></div>
</body>
<script type="text/javascript">
function fun01() {
let myArr = new Array();
myArr[0] = 0;
myArr[1] = 1;
myArr[2] = 2;
myArr[3] = 3;
$.each(myArr, function (index, item) {
let deleteBtn = $("<button></button>").append(item).appendTo($("#conatiner")).addClass("deleteClass");
console.log("index is " + index + " value is " + item);
deleteBtn.click(function () {
console.log("----- "+item);
});
});
}
$(function () {
alert("hahahah");
fun01();
})
</script>
</html>
直接通过 deleteBtn 按钮本身来绑定事件，是可以的
我之前的思路一直沉浸在 用class来绑定 事件上面，所以吃了这样的问题，我真可爱。。。
但是突然想到了一个严肃的问题，如果某些特定的情况下面就是需要通过控件的 class 属性来绑定事件，又该如何呢？？？
