Question

当用户使用类选择器名称“data”保留输入时，我想要一个ajax调用。我的问题是多次调用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>

我做错了什么？如果有更好的方法来解决这个问题，请告诉我。感谢

Answer 1

每次获得焦点时，您都要设置一个focusout事件处理程序。因此，每当一个领域失去焦点时，你最终会得到与任何领域聚焦的次数一样多的事件。

您应该只在文档上设置一次focusout事件处理程序，因此请从on函数中删除代码并将其放在旁边。

Answer 2

当您需要的只是焦点事件时，无需绑定焦点

***更改了代码以测试值是否已更改

  $(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
    }); 
  });

Answer 3

你的问题是你每次关注对象时都会以指数方式附加另一个.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 个答案: