使用FireFox时，updatepanel中的asp.net按钮无法触发Jquery函数

Question

Jquery eddited as suggested and the problem is still the same FireFox just doesnt accept these Jquery

When using chrome everything works fine but with FireFox the buttons does not fire query function when clicked. Here is one button example in my web app that is not firing when using FireFox:

Inside Inquiry div there is a button with id "izprati" and when it is clicked it sends some data to a mail the code is inside the .cs page but also when its clicked using Jquery it closes the div with id "inquiry" and FadesIn the div with id "inquiryAnswer".When using chrome everything works as expected but when using FireFox the Inquery div doesnt FadeOut on click and the InqueryAnswer div is not fading In.

the "izprati" asp.net button is inside updatePanel with asyncPostBackTrigger

HTML:

<div id="Inquiry" class="inquiry">
           <img id="closeY" class="close" src="Logos/closeY.png" />

           <table   style="width:60%;">
               <tr>
                   <td>
                    <asp:Label runat="server" ID="l1" style="font-size:30px;"> Запитване </asp:Label>

                   </td>
               </tr>
               <tr>
                   <td>
                      <asp:Label ID="l2" runat="server" style="font-size:22px;width:100px;">Имейл</asp:Label>
                   </td>
                   <td><asp:TextBox ID="t1" runat="server" style="font-size:22px;width:300px;"></asp:TextBox></td>
                   <td><asp:Label ID="Label1" runat="server" style="color:red"></asp:Label></td>

               </tr>
               <tr>
                   <td><asp:Label ID="l6" runat="server" style="font-size:22px;width:100px;">Име*</asp:Label> </td>
                   <td><asp:TextBox runat="server" ID="t6" style="font-size:22px;width:300px;"></asp:TextBox></td>
               </tr>
                <tr>
                   <td>
                      <asp:Label ID="l3" runat="server" style="font-size:22px;width:100px;">Тема</asp:Label>
                   </td>
                   <td><asp:TextBox runat="server" ID="t2" style="font-size:22px;width:300px;"></asp:TextBox></td>
                     <td><asp:Label ID="Label2" runat="server" style="color:red"></asp:Label></td>
               </tr>
                <tr>
                   <td>
                      <asp:Label ID="l4" runat="server" style="font-size:22px;width:100px;">Текст</asp:Label>
                   </td>
                   <td><textarea runat="server" id="TextArea" style="height:200px;width:300px;max-height:200px;max-width:300px;"></textarea></td>
                     <td><asp:Label ID="Label3" runat="server" style="color:red"></asp:Label></td>

               </tr>
               <tr>
                   <td>
                       <asp:Label runat="server" ID="l5" style="font-size:22px;width:100px;">Телефон</asp:Label>
                   </td>
                   <td>
                       <asp:TextBox ID="telephone" runat="server" style="font-size:22px;width:300px"></asp:TextBox>
                   </td>

               </tr>
               <tr>
                   <td></td>
                   <td><asp:Button id="izprati" runat="server" style="width:300px;height:50px" OnClick="izprati_Click" Text="Изпрати" /></td>
                    <td><asp:Label runat="server" ID="answer"></asp:Label></td>

               </tr>

           </table>
           <img src="Logos/q.jpg" style="position:absolute;right:50px;top:20px;height:200px;width:300px;" />

       </div>
       <div class="inquiryAnswer" id="inquiryAnswer">
           <img id="inquiryAnswerClose" class="close" src="Logos/closeY.png" />
                <div style="position:absolute;bottom:40px;right:15px;left:15px;" id="ThankYou" runat="server">
           Благодарим Ви за запитването! Член на нашият екип ще се свърже с Вас до 24 часа.
               </div>
       </div>
 <Triggers>

                     <asp:AsyncPostBackTrigger ControlID="izprati" EventName="Click" />

                   </Triggers>

CSS:

.inquiry {
position:fixed !important;
position:absolute;
top:10vh;
right:0;
bottom:0;
left:10vw;
width:80vw;
height:80vh;
background-color:white;
padding:10px;
z-index:10;
display:none;
-webkit-box-shadow:  0 0 3px 1px black;
box-shadow:          0 0 3px 1px black;

}
.inquiryAnswer {
position:fixed !important;
position:absolute;
top:30vh;
right:0;
bottom:0;
left:35vw;
width:30vw;
height:15vh;
background-color:white;
padding:25px;
z-index:10;
display:none;
-webkit-box-shadow:  0 0 3px 1px black;
box-shadow:          0 0 3px 1px black;
text-align:center;
font-size:21px;
font-weight:bold;
}

Jquery:

<script>
        $(document).ready(function () {

            $("#izprati").click(function () {
                $("#inquiryAnswer").fadeIn(1000);
                $(".inquiry").fadeOut(1000);
                $("#answer").text("Благодарим Ви за запитването! Член на нашият екип ще се свърже с Вас до 24 часа.");
                $('<%=t1.ClientID %>').val("");
                $('<%=t2.ClientID %>').val("");            
                $('<%=t6.ClientID %>').val("");
                $('<%=TextArea.ClientID %>').val("");
                $('<%=telephone.ClientID %>').val("");
            });
            $("#inquiryAnswerClose").click(function () { $(".inquiryAnswer").fadeOut(1000); });
        });
    </script>

Eddited Jquery to :

<script>
function BindControlEvents() {

            $('#StayOpen1').click(function () {
                $("#situationalpanel").fadeOut(1000);
                $('#DeluxeR').fadeOut(1000);
                $('#OneBedR').fadeOut(1000);

                $('#standartR').fadeIn(1000);
            });

            $('#StayOpen2').click(function () {
                $("#situationalpanel").fadeOut(1000);
                $('#standartR').fadeOut(1000);
                $('#OneBedR').fadeOut(1000);
                $('#DeluxeR').fadeIn(1000);
            });

            $('#StayOpen3').click(function () {
                $("#situationalpanel").fadeOut(1000);
                $('#standartR').fadeOut(1000);
                $('#DeluxeR').fadeOut(1000);
                $('#OneBedR').fadeIn(1000);
            });







            $(
                '#AboutUs , #NavButton1 , #NavButton2 , #NavButton7, #NavButton3 , #NavButton4 , #NavButton5 , #NavButton6 , #NavButton7, #LinkButton4 , #LinkButton5, #LinkButton6, #LinkButton7, #LinkButton8, #LinkButton9, #LinkButton10, #LinkButton11, #LinkButton12, #LinkButton13, #LinkButton14, #LinkButton15, #LinkButton16, #LinkButton17, #LinkButton18, #LinkButton19, #LinkButton20'
                ).click(function () {
                    $('#standartR , #DeluxeR , #OneBedR').fadeOut(1000);
                });



            $("#LinkButton4").click(function () {
                $("#map1").fadeIn(500);
            });
            $("#AboutUs , #NavButton3 , #NavButton4 , #NavButton5 , #NavButton6 , #StayOpen1 , #StayOpen2 , #StayOpen3 , #LinkButton17").click(function () {
                $("#map1").fadeOut(100);
            });
            $("#izprati").click(function () {
                $("#inquiryAnswer").fadeIn(1000);
                $(".inquiry").fadeOut(1000);
                $("#answer").text("Благодарим Ви за запитването! Член на нашият екип ще се свърже с Вас до 24 часа.");
                $('<%=t1.ClientID %>').val("");
            $('<%=t2.ClientID %>').val("");
            $('<%=t6.ClientID %>').val("");
            $('<%=TextArea.ClientID %>').val("");
            $('<%=telephone.ClientID %>').val("");
        });
            $("#inquiryAnswerClose").click(function () { $(".inquiryAnswer").fadeOut(1000); });

     }

     //Initial bind
     $(document).ready(function () {
         BindControlEvents();

     });

     //Re-bind for callbacks
     var prm = Sys.WebForms.PageRequestManager.getInstance();

     prm.add_endRequest(function () {
         BindControlEvents();
     });


</script>

Answer 1

JQuery selectors doesn't work with update panel. You need some work-around to implement the functionality. Here are couple of links to help you out -

jQuery $(document).ready and UpdatePanels?

My jquery selectors doesn't work after update panel in content page

Answer 2

Try this jquery script:

<script type="text/javascript">
    $("body").on("click", "#button1", function () {
        alert("Button was clicked.");
    });
</script>

Reference - click here check the link and get more detail about the issue