jQuery blur 事件触发两次答案

【问题标题】：jQuery blur event triggers twicejQuery blur 事件触发两次
【发布时间】：2015-01-06 19:18:08
【问题描述】：

我在我的一个项目中使用 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(); 
});

【问题讨论】：

首先，1.4.4已经过时了，能不更新吗？其次，您为什么要立即提出focus 和blur 事件？
你的 CSS 选择器 .cardnumber 指向一个 CSS 类，而不是一个元素。你有两个带有cardnumber 类的 HTML 元素吗？我认为您应该在问题中包含您的 HTML。见How to create a Minimal, Complete, and Verifiable example。
是的，正如@Krumia 建议的那样，粘贴您的 HTML。可能有两个元素具有 cardnumber 类。
我可以在堆栈 sn-ps 中复制此行为，其中n HTML 元素具有 CSS 类 cardnumber（并且 console.log 执行 n 次）。不幸的是，在不知道您的确切代码的情况下，我无法将其发布为答案。无法创建 JSFiddle，因为它们不支持 jQuery 1.4.4。
@Krumia 您可以在 Fiddle 中使用外部资源。如果您想回答，请使用此选项：jsfiddle.net/theagitator/xpmp1jq6/2

标签： javascript jquery

【解决方案1】：

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

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

如 cmets 中所述，请使用当前版本的 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" />

【讨论】：

【解决方案2】：

只需删除 $('cardnumber').focus().blur() 已默认，它会在加载时触发，只需使用。

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

只有在您输入卡号中的值后才会触发

【讨论】：