jquery .blur 不能使用多个文本框。射击同时聚焦和聚焦

Question

我在 ASP.NET 的 Textbox 控件上使用 jQuery .blur。我的 jQuery 代码如下。

问题是如果我将焦点从TextBox1 更改为TextBox2，反之亦然。它会触发两个 jQuery 函数。但我只希望他们在焦点控制失去焦点时开火。它在一个文本框上工作正常。但如果有两个或更多，在焦点更改时会触发两个功能。

请有任何建议。提前致谢。

问候

 $("#MainContent_TextBox1").blur(function () {
            $.ajax({
                type: "POST",
                url: document.location.pathname + '/Test',
                data: '{name: "' + $("#MainContent_TextBox1").val() + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    alert(msg.d);
                }
            });
    });

    $("#MainContent_TextBox2").blur(function () {

            $.ajax({
                type: "POST",
                url: document.location.pathname + '/Test',
                data: '{name: "' + $("#MainContent_TextBox2").val() + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    alert(msg.d);
                }
            });
    });

ASP.NET

<asp:TextBox ID="TextBox1" runat="server" Text="Text box 1"></asp:TextBox><br />
   <asp:TextBox ID="TextBox2" runat="server" Text="Text box 2"></asp:TextBox><br />
    <asp:TextBox ID="TextBox3" runat="server" Text="Text box 3"></asp:TextBox><br />
    <asp:Button ID="Button1" runat="server" Text="Button" /><br />

浏览器来源

<input name="ctl00$MainContent$TextBox1" type="text" value="Text box 1"     id="MainContent_TextBox1" class="myclass" /><br />
<input name="ctl00$MainContent$TextBox2" type="text" value="Text box 2" id="MainContent_TextBox2" class="myclass" /><br />
<input name="ctl00$MainContent$TextBox3" type="text" value="Text box 3" id="MainContent_TextBox3" class="myclass" /><br />
<input type="submit" name="ctl00$MainContent$Button1" value="Button" id="MainContent_Button1" /><br />


<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu',     disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script>

Answer 1

首先我会更改您的代码....以简化它，在 TextBox 控件上使用 class 然后执行：

$('.yourclass').blur(function () {
    $.ajax({
        type: "POST",
        url: document.location.pathname + '/Test',
        data: '{name: "' + $(this).val() + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            alert(msg.d);
        }
    });
});

那么你不必创建很多很多blur 方法！

Here is an exmaple - 在这个例子中你可以看到blur 方法工作正常

Answer 2

$("#MainContent_TextBox1").bind('blur',function () {
            $.ajax({
                type: "POST",
                url: document.location.pathname + '/Test',
                data: '{name: "' + $("#MainContent_TextBox1").val() + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    alert(msg.d);
                }
            });
    });

    $("#MainContent_TextBox2").bind('blur',function () {

            $.ajax({
                type: "POST",
                url: document.location.pathname + '/Test',
                data: '{name: "' + $("#MainContent_TextBox2").val() + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    alert(msg.d);
                }
            });
    });