点击请求ajax,发现ajax被请求多次

在做项目的过程中，使用 $(document).on('click','.className',function(){})，点击一次事件，发现 ajax 被请求多次 ,原因是点击事件被执行多次，需要对之前的点击事件解绑$(document).off('click',".className").on("click", ".className", function () {});。

点击事件

1、 $('#id').click()
当选中的选择器被点击时触发回调函数fn，$('...').click() 只能为页面已经存在的元素绑定点击事件；如果是动态生成的新的元素，是触发不了事件的。

2.$(document).on('click','.className',function(){})
on方法包含很多事件，点击，双击等等事件。$(document).on('click','.className',function(){})是将指定的事件绑定在document上，而新产生的元素如果符合指定的元素，就能够触发事件。

使用$(document).on('click','.className',function(){})时对同一个元素多次绑定同一个事件的时候，这个事件就会执行多次。所以在遇到这种情况下需要对该事件进行解绑。可以使用off解绑，即：$(document).off('click','.className');

解绑事件off()方法：
解绑一个事件：$(document).off('click');
解绑多个事件：$(document).off('... ... ...'); //空格隔开
解绑所有事件：$(document).off();

注意:是哪个事件会多次执行就在哪个on()前面先绑一次off();

点击事件总结：

1、解绑点击事件

//方法一：
$('#id').click()   //绑定点击事件
$('#id').unbind()  //解绑

//方法二：
$(document).on("click", ".className", function(){})  //绑定事件
$(document).off('click',".className").on("click", ".className", function () {}); // 先解绑再执行点击事件

2、 one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。当使用 one() 方法时，每个元素只能运行一次事件处理器函数。

$("p").one("click",function(){  //点击每一个p元素的时候都会执行一次，第二次无效。
  $(this).animate({fontSize:"+=6px"});
});

3、当双击元素时，会发生 dblclick 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。在很短的时间内发生两次 click，即是一次 double click 事件。

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数。提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。

$("button").dblclick(function(){
  $("p").slideToggle();
});