jquery click () событие запускается повторно - PullRequest
Новая
       8

jquery click () событие запускается повторно

3 голосов
/ 21 июля 2010

У меня вопрос jQuery:

У меня есть кнопка «ДОБАВИТЬ», которая добавляет текст в базу данных с помощью вызова 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 () вызывается снова во второй и третий раз, в третий раз, а затем снова.Я не могу понять, как помешать этому.Я думал, что освобождение от обязательств поможет, но, похоже, это не так.Любая помощь будет высоко ценится.

Ответы [ 3 ]

4 голосов
/ 21 июля 2010

Ваша главная проблема здесь: 

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

Это на самом деле ничего не связывает, потому что оно никогда не было связано с этой функцией, например: 

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

Этосвязывает анонимную функцию (ключевым моментом является то, что вы не можете ссылаться на нее так, как вы хотите позже), вместо этого, поскольку вы не используете event, привязывайте ее напрямую, например так:вызов .unbind() вам нужно снова сослаться на эту функцию: 

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

Это исправление, что касается "почему?" ... хорошо, поскольку это не былобудучи свободным, он просто каждый раз создавал новый обработчик событий.Каждый раз, когда вы нажимали #addRecord, он добавлял еще один обработчик сохранения в событиях щелчка элементов #editPopUp и #submitChanges, правильная отмена привязки, как я делал выше, должна предотвратить это.

2 голосов
/ 21 июля 2010

Вы отменяете привязку этого события 'bindEditButtonEventListener', но фактически никогда не связываете его, когда привязываете анонимный метод к событию click #submitChanges.

2 голосов
/ 21 июля 2010

Я думаю, что вы используете unbind неправильно.Попробуйте удалить второй параметр "bindEditButtonEventListender".

Поэтому используйте вместо этого: 

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