当使用FireFox时,updatepanel中的asp.net按钮在点击时不会触发Jquery函数

asp.net button inside updatepanel not firing Jquery function on click when using FireFox

本文关键字:Jquery 函数 net FireFox updatepanel asp 中的 按钮      更新时间:2023-09-26

Jquery按建议编辑,问题仍然是一样的FireFox就是不接受这些Jquery

当使用chrome一切工作正常,但与FireFox按钮不触发查询功能时,点击。以下是我的web应用程序中的一个按钮示例,当使用FireFox时它不会触发:

内部查询div有一个按钮id"izprati",当它被点击它发送一些数据到邮件的代码是在。cs页面内,但也当它点击使用Jquery它关闭div id"Inquiry"和FadesIndiv id"inquiryAnswer"。当使用chrome时,一切都如预期的那样工作,但当使用FireFox时,Inquerydiv不淡出点击和InqueryAnswerdiv不淡出。

"izprati"asp.net按钮是在updatePanel与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="answerswer"></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>

编辑Jquery到:

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

JQuery选择器不支持更新面板。您需要一些变通方法来实现该功能。这里有几个链接可以帮助你-

jQuery美元(文档)。ready和UpdatePanels?

我的jquery选择器在更新内容页面板后不起作用

试试这个jquery脚本:

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

参考资料-点击这里查看链接并获得有关该问题的更多详细信息