Question

我有一个jQuery问题：

我有一个“ADD”按钮，通过AJAX调用（$ .post（）...）将文本添加到数据库。问题是，物品正在反复添加。例如：

页面加载后：用户点击“添加”按钮：

第一次，它添加了一个项目。
一秒钟时间，它会添加一个项目然后再次添加（共2项）
第三个时间，它会添加一个项目，然后再次添加它（总共3个项目）
等...

这是一个问题，因为数据是重复的。

我已经缩小了问题范围：

 $(document).ready(function()
 {
  // set event handler for Add button
  bindAddButtonEventListener();
 });

 // set event handler for Add button
 function bindAddButtonEventListener()
 {
  // event handler for the add button
  $("#addRecord").click(function()
  {
   openPopUpBox();

   enablePopUpBoxControls();

   // event handler for Submit button on admin Popup box. Submits data to database
   $("#editPopUp #submitChanges").click(function(event)
   {
    addNewRecord();
   });
  });
 }

 // this method will submit a new record to the server, using AJAX post
 function addNewRecord()
 {
  var obj = buildJSONobject();

  $.post("admin/addRecordToDatabase", obj, function(data)
  {
   displayServerValidation(data);

   cancelPopUpChanges();
   getCatagoriesItems();
  });

  disablePopUpBoxControls();
 }

 // this unbinds the events for the popup box controls
 function disablePopUpBoxControls()
 {
  // unbind event handler for button
  $("#editPopUp #submitChanges").unbind("click", bindEditButtonEventListener);
  //$("#editPopUp #submitChanges").unbind("click", bindAddButtonEventListener);

  // unbind event handler for button
  $("#editPopUp #cancelEdit").unbind("click", enablePopUpBoxControls);
 }

出于某种原因，在bindAddButtonEventListener（）内部运行此代码：

   $("#editPopUp #submitChanges").click(function(event)
   {
    addNewRecord();
   });

第二次和第三次再次调用addNewRecord（），第三次再次调用。我无法弄清楚如何阻止它这样做。我认为解除绑定会有所帮助，但似乎没有。任何帮助将不胜感激。

Answer 1

你的主要问题在于：

// unbind event handler for button
$("#editPopUp #submitChanges").unbind("click", bindEditButtonEventListener);

这实际上并没有解除任何绑定，因为它并没有绑定到该函数，例如：

$("#editPopUp #submitChanges").click(function(event)
{
 addNewRecord();
});

这会绑定一个匿名函数（关键点是你不能像以后那样引用它），而是因为你没有使用event，所以直接绑定它，如下所示：

$("#editPopUp #submitChanges").click(addNewRecord);

然后当你致电.unbind()时，你需要再次引用该功能：

$("#editPopUp #submitChanges").unbind("click", addNewRecord);

这就是解决方案，至于“为什么？”......好吧，因为它没有被绑定，所以每次都只是新建一个事件处理程序。每次点击#addRecord时，都会在#editPopUp和#submitChanges元素点击事件中添加另一个保存处理程序，正如我上面所说的那样正确解除绑定应该可以防止这种情况发生。

Answer 2

我认为你正在使用unbind错误。尝试删除第二个参数“bindEditButtonEventListender”。

所以请改用：

$("#editPopUp #submitChanges").unbind("click");

Answer 3

解除绑定此事件'bindEditButtonEventListener'，但在将匿名方法绑定到#submitChanges点击事件时，您实际上从未绑定它。

jquery click（）事件反复运行

3 个答案: