为什么UpdatePanel中的按钮在第一次之后不执行JQuery事件 [英] Why a button inside an UpdatePanel doesn't execute a JQuery event after the first time
问题描述
我有一个按钮(在 UpdatePanel 里面)，它会打开一个弹出表单，允许我输入一些数据，然后提交以执行某些功能(使用输入的新数据更新UpdatePanel)并关闭弹出窗口-上:
I have a button (inside an UpdatePanel) which opens a popup form which allows me to enter some data then submitting does some function (Updates an UpdatePanel with the new data entered) and closes the pop-up:
<asp:HyperLink ID="hlCreateMsg" runat="server" NavigateUrl="JavaScript:void(0);" CssClass="linkOff" ClientIDMode="Static">Create New</asp:HyperLink>
<div id="popupContact">
<a id="popupContactClose" title="Close Window">x</a>
<h3>Add a New Message</h3>
<div id="dvFirst" class="mainSecond">
<div id="leftdiv3" class="leftdiv">Client: </div>
<div id="rightdiv3" class="rightdiv"><asp:DropDownList ID="ddlCliNewMsg" AutoPostBack="false" ClientIDMode="Static" runat="server" CssClass="chosen-select" ></asp:DropDownList></div>
</div>
<div id="dvSecond" class="mainSecond">
<div id="leftdiv4" class="leftdiv">Site: </div>
<div id="rightdiv4" class="rightdiv"><asp:DropDownList ID="ddlSitNewMsg" AutoPostBack="false" ClientIDMode="Static" runat="server" CssClass="chosen-select"></asp:DropDownList></div>
</div>
<div id="dvThird" class="mainSecond">
<div id="leftdiv5" class="leftdiv">Provider: </div>
<div id="rightdiv5" class="rightdiv"><asp:DropDownList ID="ddlProNewMsg" AutoPostBack="false" ClientIDMode="Static" runat="server" CssClass="chosen-select"></asp:DropDownList></div>
</div>
<div id="dvFourth" class="mainFirst">
<div id="leftdiv1" class="leftdivspec"><sup style="color: #FF0000; font-weight: bold;">*</sup>Message: </div>
<div id="rightdiv1" class="rightdivspec"><asp:TextBox ID="tbMessage" ClientIDMode="Static" runat="server" TextMode="MultiLine" Columns="30" Rows="5"></asp:TextBox></div>
</div>
<div id="dvFifth" class="mainSecond">
<div id="leftdiv2" class="leftdiv">Active?</div>
<div id="rightdiv2" class="rightdiv"><asp:CheckBox ID="cbIsActive" ClientIDMode="Static" runat="server" /></div>
</div>
<div style="width: 96%; text-align: right; padding: 2%;">
<asp:UpdatePanel runat="server" ID="upSubmit" ClientIDMode="Static" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="btnExport" ClientIDMode="Static" UseSubmitBehavior="false" OnClick="SubmitAdminMessage" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
<div id="backgroundPopup"></div>
脚本:
//CONTROLLING EVENTS IN jQuery
$(document).ready(function () {
//LOADING POPUP
//Click the button event!
$("#hlCreateMsg").click(function (e) {
e.preventDefault();
//centering with css
centerPopup();
//load popup
loadPopup();
});
$("#Create").click(function (e) {
e.preventDefault();
//centering with css
centerPopup();
//load popup
loadPopup();
});
$("#btnSubmit").on('click', function (e) {
alert('test');
e.preventDefault();
disablePopup();
});
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function () {
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function () {
disablePopup();
});
//Press Escape event!
$(document).keypress(function (e) {
if (e.keyCode == 27 && popupStatus == 1) {
disablePopup();
}
});
});
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup() {
//loads popup only if it is disabled
if (popupStatus == 0) {
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup() {
//disables popup only if it is enabled
if (popupStatus == 1) {
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
$("#tbMessage").val('');
$("#cbIsActive").attr("checked", false);
popupStatus = 0;
}
}
//centering popup
function centerPopup() {
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight / 2 - popupHeight / 2,
"left": windowWidth / 2 - popupWidth / 2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
因此，第一次加载页面时，我单击 hlCreateMsg 链接，弹出窗口出现了，我能够输入数据并提交.弹出窗口关闭并更新 UpdatePanel ，同时显示 test 警报窗口.但是每次打开弹出窗口(不刷新页面)时，submit按钮都会更新 UpdatePanel ，但不会关闭弹出窗口，也不会显示 test警报.
So the first time the page load and I click on the hlCreateMsg link, the pop-up comes up and I am able to enter the data and submit. The pop-up closes and updates the UpdatePanel also displays the test alert window. But each consequent time I open the pop-up (without refreshing the page), the submit button does update the UpdatePanel but it doesn't close the pop-up nor does it display the test alert.
如何解决该问题?
更新:在浏览了其他一些问题之后，通过修改以下代码解决了该问题:
UPDATE: After looking through some other questions it was solved by modifying the code to this:
$("#btnSubmit").live('click', function (e) {
e.preventDefault();
disablePopup();
});
但这给我一个错误: 0x800a01b6-Microsoft JScript运行时错误:对象不支持此属性或方法
推荐答案
如果更改事件处理程序，使其使用< body> 中的委托，则它们将在以下情况下继续工作DOM已更改.因此，例如:
If you change your event handlers such that they use delegation from the <body>, then they'll continue to work when the DOM is altered. Thus, for example:
$("body").on('click', "#btnSubmit", function (e) {
alert('test');
e.preventDefault();
disablePopup();
});
处理程序函数实际上不必更改(通常).我不确定您的页面上的哪些元素会被弹出机制覆盖，但是可以(对于您的事件处理程序)安全地进行上述转换(我很确定).
The handler functions really don't have to change (usually). I'm not sure which of the elements on your page are being overwritten by the popup mechanism, but the transformation above can (I'm pretty sure) be made safely for any of your event handlers.
这篇关于为什么UpdatePanel中的按钮在第一次之后不执行JQuery事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
