为什么一个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>
SCRIPT：
SCRIPT:
//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 还显示测试警报窗口。但是，每一次因之我打开弹出（无需刷新页面），提交按钮不更新的UpdatePanel ，但它不关闭弹出也不显示测试警报。
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.
我如何解决这个问题？
更新：通过它通过修改code这个解决一些其他问题细算：
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 - 微软JScript运行时错误：对象不支持此属性或方法
推荐答案
如果你改变你的事件处理程序，使它们使用委派从＆LT;身体GT; ，然后他们会继续当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();
});
的处理函数真的没有改变（通常情况下）。我不知道，你的页面上的元素都被弹出的机制覆盖，但以上即可转变（我pretty确定）安全地做出您的任何事件处理程序。
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屋！
