strange behavior of focusout handler

Question

This is my code:

<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"/>

I run my code, and do the following steps:
1. press with mouse inside txt1
2. press with mouse on btn1
The alert message does not appear. It appears only if I click the button again.
This happens only when I change lbl1's text, on focusout.
Why does the text changing cause the click event not to be fired?

Answer 1

Actually your script is not binding the click event to the button. Because it has the attribute runat=server. So it will change the id of the elements at the time of rendering. you should either use a class name or clientID instead of id.

using class name,

 <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" />

Edit

The problem is with the position of label. Please check this Fiddle