jquery如何终止一个事件

Posted 2023-05-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery如何终止一个事件相关的知识，希望对你有一定的参考价值。

如下代码：
$("a.reply").click(function() //点击'回复'触发
//两处append调用都是供测试用，项目中为对应处其他功能代码

$('body').append('<div id="test">执行到节点1</div>');
$('#b'+id1).bind('blur',function()
$('body').append('<div id="test">执行到节点2</div>');
)
return false;
)
我想要的效果是用户点击一次’回复‘并获得相应响应后，程序就退出这次点击事件，之后再次对'回复'的点击互不影响，彼此独立。但是进行测试操作：

点击'回复'触发click事件--->再触发blur事件----->再点击'回复'触发click事件------>再触发blur事件 -----再click---->再blur

结果却是：" 执行到节点1-----执行到节点2----->执行到节点1------>执行到节点2------->执行到节点2----->执行到节点1------>执行到节点2------->执行到节点2-----执行到节点2> "

说明之后对'回复'按钮的点击也是包含在第一次点击事件里的。
请问怎样才能使各次对'回复'的点击事件相互独立？新手求教~不胜感激！

参考技术A 首先你要理解一点，jQuery 的绑定事件是能够叠加的，比如对一个div 绑定的多次 blur 事件，在触发的时候多个绑定在div 上的blur 事件都会执行；
<div id="demo'></div>
$( '#demo' ).bind( 'blur', function() );
$( '#demo' ).bind( 'blur', function() );
$( '#demo' ).bind( 'blur', function() );
比如以上对 demo 绑定了 3 次blur 事件，那么在触发blur 事件的时候 3 个都会执行；

想要只执行最后一次绑定的时间而忽视之前绑定的事件，就要在下一次绑定事件之前先解除原先绑定的事件，再绑定新的事件
<div id="demo'></div>
$( '#demo' ).bind( 'blur', function()
$( '#demo' ).unbind( 'blur' ); // 在执行完 blur 事件后解除绑定的事件或者在其他的地方解除绑定也行；
);

原理说多了，其实楼主的代码改法很简单，
$('#b'+id1).bind('blur',function()
$('body').append('<div id="test">执行到节点2</div>');
)
把这个事件绑定写到 click 外面去，然后在 click 里面写上模拟 blur 事件的代码就可以了，这样就保证了blur 事件只绑定了一次，而不是在每次click 之后叠加绑定了新的事件
$("a.reply").click(function()
//点击'回复'触发
//两处append调用都是供测试用，项目中为对应处其他功能代码

$('body').append('<div id="test">执行到节点1</div>');
$('#b'+id1).blur(); // 执行绑定的 blur 事件
return false;
)

$('#b'+id1).bind('blur',function()
$('body').append('<div id="test">执行到节点2</div>');
)追问

我懂你的意思了，谢谢！
不过，假设我之前恰恰通过一句 $('#b'+id1).focus 让其得到焦点并且焦点需要暂时保持，不能在click事件内部写上模拟 blur 事件，这怎么办？

追答

模拟事件的话，什么时候在哪里需要就在哪里加上，不需要就去掉；
如果是写在事件内部，而有时候某种情况下又不需要执行，那就用参数来控制；定义一个参数，什么情况下模拟，什么情况下不模拟

本回答被提问者和网友采纳

jquery操作select2控件

(一)select2常用的操作:添加、移除、获取选中的value()与text()

(1)移除事件：$("#select_id").unbind("change"); //为Select移除选择改变事件

　　unbind的用法：①定义和用法

　　　　unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。

　　　　ubind() 适用于任何通过 jQuery 附加的事件处理程序。

　　　　②取消绑定元素的事件处理程序和函数

　　　　规定从指定元素上删除的一个或多个事件处理程序。如果没有规定参数，unbind() 方法会删除指定元素的所有事件处理程序。

　　　　语法：$(selector).unbind(event,function) 示例如下：

$("p").click(function(){
    $(this).slideToggle();
});
$("button").click(function(){
    $("p").unbind();    //取消元素‘p’的所有应用程序
});

　　　　③使用 Event 对象来取消绑定事件处理程序

　　　　规定要删除的事件对象。用于对自身内部的事件取消绑定（比如当事件已被触发一定次数之后，删除事件处理程序）。

　　　　如果未规定参数，则 unbind() 方法会删除指定元素的所有事件处理程序。

　　　　语法：$(selector).unbind(eventObj) 示例如下：

  var x=0;
  $("p").click(function(e){
    $("p").animate({fontSize:"+=5px"});  //动态改变p标签中字体是属性
    x++;
    if (x>=2)
    {
      $(this).unbind(e);  //this指点击的当前事件，此处用于取消点击事件
    }
  })

（2）添加事件

$("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发；也可以说select_id值发生改变触发该事件

示例：

//jsp
<select id="druge" class="form-control input-sm" >
</select>
//js
$("#druge").change(function(){        
  var drugData = $(this).val();    //获取当前事件标签的值
  alert("aaaaaaa");
})

(3) 获取选中项的相关属性：

$("#select_id").find("option:selected").text(); //获取Select选择的text()

$("#select_id").val(); //获取Select选择的Value()

$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值

(4) JQuery获取select控件中特定的节点：

$("#select_id option:first").attr("index"); //获取Select最小的索引值

$("#select_id option:last").attr("index"); //获取Select最大的索引值

(5)JQuery设置Select控件选中的项（也就是为select赋初始值）：

$("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中

$("#select_id ").val(4); // 设置Select的Value值为4的项选中

$("#select_id option[text=‘内容]").attr("selected", true); //设置Select的Text值为jQuery的项选中

(6) JQuery添加/删除Select的Option项：