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關鍵字有什么區別，請給我澄清。