聚焦处理程序的奇怪行为

时间:2014-04-30 06:39:24

标签: jquery onclick focusout

这是我的代码:

<script type="text/javascript">
    $(document).ready(function () {
        $("#txt1").focusout(function () { $("#lbl1").text("aaaa"); });
        $('#btn1').click(function (){ alert("clicked"); });
    });
</script>

<asp:Label ID="lbl1" runat="server" ClientIDMode="Static" />
<asp:TextBox ID="txt1" runat="server" ClientIDMode="Static"/>
<asp:Button ID="btn1" runat="server" ClientIDMode="Static"/>

我运行我的代码,并执行以下步骤:
1.用鼠标在txt1内按下
2.用鼠标按btn1 警报消息不会出现。只有当我再次单击该按钮时才会出现 只有当我在焦点输出时更改lbl1的文本时才会发生这种情况。
为什么文本更改会导致不触发click事件?

1 个答案:

答案 0 :(得分:0)

实际上,您的脚本没有将click事件绑定到按钮。因为它具有属性runat=server。因此它将在渲染时更改元素的id。你应该使用类名或clientID而不是id。

使用班级名称,

 <script type="text/javascript">
 $(document).ready(function () {
    $(".txt1").focusout(function (e) {
        e.stopPropagation();
        $(".lbl1").text("aaaa");
    });
    $('.btn1').click(function (e) {
        e.stopPropagation();
        alert("clicked");
    });
});
</script>

<asp:Label ID="lbl1" CssClass="lbl1"  runat="server" />
<asp:TextBox ID="txt1" CssClass="txt1" runat="server" />
<asp:Button ID="btn1" CssClass="btn1" runat="server" />

修改

问题在于标签的位置。请查看此Fiddle