focusout вызывается несколько раз

#jquery

Вопрос:

Я хочу, чтобы вызов ajax выполнялся, когда пользователь оставляет ввод с именем селектора класса «data». Моя проблема в том, что событие focusout вызывается несколько раз.

  $(document).ready(function(){
var test2=0;
$(document).on('focus', '.data', function() {
    $this = $(this);
    $this.focusout(function(){
            $('div.debug2').text(test2  );
    });     
}); 
  });

Вот мой html :

 <c:forEach var="user" items="${users}">
 <tr id='user_${user.id}' class="datarow">
  <td><input class="data" type="text" name="role" value="${user.role }"></td>
  <td><input class="data" type="text" name="fullName" value="${user.fullName }"></td>                                  
 </tr>
</c:forEach>
<div class="debug2">Focus Out</div>

Что я сделал не так? Если есть какой-либо способ лучше справиться с этим, дайте мне знать. Спасибо

Ответ №1:

Вы настраиваете обработчик события focusout каждый раз, когда что-то получает фокус. Таким образом, каждый раз, когда поле теряет фокус, вы получите столько событий, сколько раз фокусировалось любое поле.

Вы должны настроить обработчик события focusout только один раз в документе, поэтому удалите код из on функции и поместите его рядом с ней.

1. Я думал, что $(document).on(‘focus’, ‘.data’, function() .. означает, что это только имя селектора класса «data»?

2.Да, но проблема здесь в том, что каждый раз focus , когда вызывается обработчик, создается один новый focusout обработчик, и в конце они складываются.

3. О, понятно, я думал, что когда в селекторе создается новый focusout , он удаляет предыдущие.

4. Нет, он остается. Однако вас может заинтересовать функция jQuery one — она создает обработчик событий, который выполняется не более одного раза.

Ответ №2:

ваша проблема в том, что каждый раз, когда вы фокусируетесь на объекте, вы присоединяете другое событие .focusout экспоненциально.

использовать

  $(document).ready(function(){
    var test2=0;
    $(document).on('focusout', '.data', function() {
    //do whatever you need
    }); 
  });

или либо отменить привязку предыдущего события, вы устанавливаете новое, но это плохой код

  $(document).ready(function(){
        var test2=0;
        $(document).on('focus', '.data', function() {
        $('.data').unbind('focusout');
        $(document).on('focusout', '.data', function() {
          });
      });

Ответ №3:

нет необходимости привязываться к фокусу, когда все, что вам нужно, это событие focusout

*** изменен код, чтобы проверить, изменилось ли значение

   $(document).ready(function(){
      $(document).on('focusout', '.data', function() {
       var current = $(this),
           oldVal = current.data("oldVal");
       if(this.value === oldVal)
       { 
         return;
       }
       current.data("oldVal", this.value);
       //make ajax call
    }); 
  });