绑定是on
移除是off
这是移除具体的某一个时事件的函数
也可以移除某一类事件
$(".count").on(“click”, “span”,count_on);
$(".count").off(“click”, “span”,count_on);
这里思考的是 count_on(event)这个event是哪里来的,在JQ底层有这么一句
$(".count span .add").click(count_on) JQ
–>
ele.onclick = count_on; JS
count_on 这个时候 接收到了一个event参数
只要是被event触发的函数,这个函数都会接收到这个event对象
function count_on(event){
console.log(arguments);
console.log("event",event);
console.log("event.target",event.target);
var target = event.target;
//add
if (target.className == "add") {
$(".count").off("click", "span",count_on);
console.log("offed");
var num = $(this).prev(); //prev 是一个集合
var reduce = $(this).prev().prev(); //prev 是一个集合
var subtotal = $(this).parent().next();
num.val(num.val() * 1 + 1); //输入框
if (num.val() * 1 > 1) {
reduce.html("-");
}
var numValue = num.val() * 1;
var priceValue = $(this).parent().prev().html() * 1;
subtotal.html((numValue * priceValue).toFixed(2));
//计算总计
countSumAndPrice();
check();
//add.php
var id = this.getAttribute("cart_id");
$.ajax({
url: "../php/numChange.php",
data: {
id: id,
keyword: "add"
},
type: "get",
dataType: "json",
success: function (obj) {
console.log(obj);
$(".count").on("click", "span",count_on);
}
})
}
//reduce
if (target.className == "reduce") {
console.log("offed");
$(".count").off("click", "span",count_on);
var num = $(this).next();
var subtotal = $(this).parent().next();
// var reduce = $(this).prev().prev();
num.val(num.val() * 1 - 1);
if (num.val() == 1) {
$(this).html("");
}
// else {
// num.val(num.val() * 1 - 1);
// }
//获取
var numValue = num.val() * 1;
var priceValue = $(this).parent().prev().html() * 1;
subtotal.html((numValue * priceValue).toFixed(2));
countSumAndPrice();
check();
//reduce.php
var id = this.getAttribute("cart_id");
$.ajax({
url: "../php/numChange.php",
data: {
id: id,
keyword: "reduce"
},
type: "get",
dataType: "json",
success: function (obj) {
console.log(obj);
$(".count").on("click", "span",count_on);
}
})
}
// })
}
//监听
$(".count").on("click", "span",count_on);
这个被事件触发的函数接收到的event
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button">点击</button>
</body>
<script type="text/javascript" src="jquery-1.11.3.js">
</script>
<script type="text/javascript">
$("button").click(but);
function but(){
console.log(arguments);
}
</script>
</html>