jquery 点击处理程序多次触发

Question

我的 saveBtn 单击事件多次触发时遇到问题，因为每次用户调用该函数时都会调用下面的函数并注册一个新的单击处理程序。如何只注册一键事件处理程序？

function forceAnnotation(annotationNo,objectNo,clientNo, callBack) {

     $('#forcedAnnotation').dialog( { 
        modal: true,
        width: 385,
        height: 370,
        closeOnEscape: false,
        open: function(event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); }
     });

     $('#cancelBtn').click(function() {
        callBack.onCancel();
        $('#forcedAnnotation').dialog("close")
     });

     $('#saveBtn').click(function(){
             //make ajax call
     });

  }

Answer 1

也许你可以使用 jQuery.one() 函数。

“将处理程序附加到元素的事件。每个元素最多执行一次处理程序。”

http://api.jquery.com/one/

Answer 2

如果您每次都被迫添加单击处理程序，为什么不每次都将其分离：

$('#cancelBtn').unbind('click');

为了确保您只是取消绑定此特定的单击处理程序，您可以使用命名空间。

$('#cancelBtn').unbind('click.annotation').bind('click.annotation', function(e) {
  callBack.onCancel();
  $('#forcedAnnotation').dialog("close")
});

$('#saveBtn').unbind('click.annotation').bind('click.annotation', function(e) {
  //make ajax call
});

这应该有效，我希望

Answer 3

最简单的方法是重构代码，将 click 处理程序注册删除到函数之外。

如果这是不可能的，您可以在 forceAnnotation() 函数的范围之外声明取消函数。并在您的函数中将其重新定义为您所需要的。

 var cancelClick = function(){};

 function forceAnnotation(annotationNo,objectNo,clientNo, callBack) {

   $('#forcedAnnotation').dialog( { 
    modal: true,
    width: 385,
    height: 370,
    closeOnEscape: false,
    open: function(event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); }
   });

   cancelClick =  function(){
                  callBack.onCancel();
                  $('#forcedAnnotation').dialog("close");
                }
 }


 $('#cancelBtn').click(function() {
   cancelClick();
 });

 $('#saveBtn').click(function(){
         //make ajax call
 });

其他选项是 .one()

将处理程序附加到事件
元素。处理程序执行于
每个元素最多一次。

或者每次都简单地 unbind() 点击处理程序。

 $('#cancelBtn').unbind("click").click(function() {
    callBack.onCancel();
    $('#forcedAnnotation').dialog("close")
 });