jQuery模糊事件触发两次

Question

我在其中一个项目中使用jQuery-1.4.4，但遇到了一个问题，即输入元素之一的模糊事件被两次触发。请提供帮助，其功能如下。

$(function () {
    $('.cardnumber').keyup(function () {
        //Need to call a function
    }).focus(function () {
        //Need to call a function
    }).blur(function () {
        console.log('blur');
    });

    $('.cardnumber').focus().blur(); 
});

Answer 1

只需删除$('cardnumber').focus().blur()是默认设置，它将在加载时触发，仅使用即可。

$(function () {
    $('.cardnumber').keyup(function () {
        //Need to call a function
    }).focus(function () {
        //Need to call a function
    }).blur(function () {
        console.log('blur');
    });
});

仅在您输入卡号中的值后才触发

Answer 2

在下面的演示中可以看到， blur仅触发一次。 因此，可以肯定地说，其他一些代码必须对第二个触发器负责。

导致问题的一种方法是，如果标记中有第二个.cardnumber元素。 因此，检查以确保您有一个或是否有更多并且您只希望定位一个，然后使用： $('.cardnumber').first().focus().blur(); 例如，以第一个为目标。

也如注释中所述，使用当前版本的jQuery。

 $(function () { $('.cardnumber').keyup(function () { //Need to call a function }).focus(function () { //Need to call a function }).blur(function () { console.log('blur'); }); $('.cardnumber').focus().blur(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <input class="cardnumber" type="text" name="cardnumber" /> 

两个元素 ：-模糊触发两次

  $(function () { $('.cardnumber').keyup(function () { //Need to call a function }).focus(function () { //Need to call a function }).blur(function () { console.log('blur'); }); $('.cardnumber').focus().blur(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <input class="cardnumber" type="text" name="cardnumber1" /> <input class="cardnumber" type="text" name="cardnumber2" /> 

解决方案 -目标之一

  $(function () { $('.cardnumber').keyup(function () { //Need to call a function }).focus(function () { //Need to call a function }).blur(function () { console.log('blur'); }); $('.cardnumber').first().focus().blur(); }); 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <input class="cardnumber" type="text" name="cardnumber1" /> <input class="cardnumber" type="text" name="cardnumber2" /> 

Answer 3

$(function () {
    $('.cardnumber').live('keyup', function () {
        //Need to call a function
    }).live('focus', function () {
        //Need to call a function
    }).live('blur', function () {
        console.log('blur');
    });

    $('.cardnumber').focus().blur(); 
 });

当我如上所述更新功能时，它可以正常工作，我不知道为什么它可以正常工作。如果您知道在这种情况下使用live关键字和不使用live关键字有什么区别，请给我澄清。