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")
 });

jquery点击处理程序多次触发

3 个答案: