停止jQuery双重绑定点击事件（最佳做法）

Question

这是我的问题。

我正在使用MVC，并在很多索引视图中，我有一个带有URL的“删除”按钮/徽标。所以我想让这个删除函数与jQuery和AJAX一起工作。

我的按钮：

<a class="delbtn" href='<%= Url.Action("Delete", new {id=item.Vrst_ID}) %>'> 
         <img src="<%= Url.Content("~/img/cancel.png") %>" alt="Delete" width="16" /></a> 

每页jQuery代码：

 <script type="text/javascript"> 
      $(document).ready(function() { 

       $(".delbtn").click(function() { 
        var msg = "set " + $(this).parent().parent().find(".vrsttitel").text() + " "; 
        deleteConfirmation(msg, this); 
        return false; 
       }); 
      }); 
     </script> 

其中包括在js文件的代码。

function deleteConfirmation(msg, handler) { 
    var showIt = function (hash) { 
     hash.w.find("#modaltekst").text(msg); 
     $("#delmodal #btnJa").click(function() { 
      $("#delmodal").jqmHide(); 
      setHighlight("Verwijderen..."); 
      $.post($(handler).attr("href"), null, function (data) { 
       if (data.succes) { 
        setHighlightOK("Verwijderd"); 
        $(handler).parent().parent().fadeOut("slow"); 
       } else { 
        if (data.error != "") { 
         setError(data.error); 
        } else { 
         setError("Verwijderen mislukt."); 
        } 
       } 
      }, "json"); 
     }); 

     $("#delmodal #btnNee").click(function() { 
      $("#delmodal").jqmHide(); 
     }); 

     $("#delmodal").show(); 
     return false; 
    }; 

    $("#delmodal").jqm({ onShow: showIt }).jqmShow(); 

} 

基本上这个工作，但我第二次删除的东西，在$。员额被执行了两次，因为点击功能被添加到$（“＃delmodal #btnJa”）的两倍。

所以我想分开那些是和否按钮（从deletemodal），但在'是'按钮（#btnJa）我需要处理程序采取其URL。

为了解决这个问题，我想在使用后取消绑定click事件，从而使它不会建立点击事件，但我认为这不是最佳实践。

我应该怎么做？

Answer 1

而是解除绑定/重新绑定你可以一次绑定按钮和只存储handler.href这是所有的使用$.data()和.data()这样的改变在其他地方，例如：

$("#btnJa").click(function() { 
    $("#delmodal").jqmHide(); 
    setHighlight("Verwijderen..."); 
    var handler = $.data(this, 'handler'); 
    $.post(handler.attr('href'), function (data) { 
     if (data.succes) { 
      setHighlightOK("Verwijderd"); 
      handler.parent().parent().fadeOut("slow"); 
     } else { 
      if (data.error != "") { 
       setError(data.error); 
      } else { 
       setError("Verwijderen mislukt."); 
      } 
     } 
    }, "json"); 
}); 

$("#btnNee").click(function() { 
    $("#delmodal").jqmHide(); 
}); 

function deleteConfirmation(msg, handler) { 
    var showIt = function (hash) { 
     hash.w.find("#modaltekst").text(msg); 
     $("#btnJa").data('handler', $(handler)); 
     $("#delmodal").show(); 
     return false; 
    }; 

    $("#delmodal").jqm({ onShow: showIt }).jqmShow(); 
} 

这仅结合click处理程序一次，当你拨打deleteConfirmation我们存储handler.href上#btnJa有一个数据属性，所以每次你点击另一个.delete它将更新$.post()去哪个页面。

这里的另外一个优化是，如果一个元素有一个ID使用只#ID的选择，这是比任何其他选择快很多......因为它们必须是唯一的，就没有必要包括家长或任何其他信息在选择器真的:)