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关键字的区别，请给我一个澄清。

jQuery模糊事件触发两次

3 个答案: