为什么UpdatePanel中的按钮在第一次之后没有执行JQuery事件?
Why a button inside an UpdatePanel doesn't execute a JQuery event after the first time
我有一个按钮(在UpdatePanel
内)打开一个弹出式表单,允许我输入一些数据,然后提交一些功能(更新UpdatePanel与输入的新数据)并关闭弹出:
<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
警报窗口。但每次我打开弹出窗口(不刷新页面),提交按钮确实更新了UpdatePanel
,但它不关闭弹出窗口,也不显示test
警报。
如何解决这个问题?
更新:在查看了一些其他问题后,通过修改代码来解决:
$("#btnSubmit").live('click', function (e) {
e.preventDefault();
disablePopup();
});
但这给了我一个错误:0x800a01b6 - Microsoft JScript runtime error: Object doesn't support this property or method
如果您更改您的事件处理程序,使它们使用来自<body>
的委托,那么当DOM更改时它们将继续工作。例如:
$("body").on('click', "#btnSubmit", function (e) {
alert('test');
e.preventDefault();
disablePopup();
});
处理程序函数通常不需要改变。我不确定页面上的哪些元素正在被弹出机制覆盖,但上面的转换可以(我很确定)安全地用于任何事件处理程序。
相关文章:
- 如何在category.php中执行jquery,这应该适用于类别wordpress中的每个帖子
- 在Grails中的gsp中执行jquery代码
- 使用数组表示法对多个字段执行jQuery日期选择器
- 可以'不能间接执行JQuery函数
- 必须等待执行 jQuery,直到加载服务
- 如何按顺序执行 jQuery 函数
- 如何在 ul 标签下执行 JQuery UI 自动完成
- 如何在Safari提交表单之前执行JQuery
- 对未知数量的元素执行Jquery循环
- 页面内容加载完毕后执行Jquery功能
- 在动态列表中单击的特定img上执行JQuery
- 如何在运行时添加的对象上执行Jquery插件
- Android-Javascript:如何在webview中执行jquery
- 在setTimeout中执行jQuery成员函数而不关闭的方法
- Jquery:在Jquery的(字符串)变量中执行Jquery脚本
- 执行Jquery函数()的两个条件
- 表单提交成功后调用/执行JQuery函数
- 当记录达到10以上时,Bootstrap中的DataTable不执行jQuery
- 通过javascript加载jQuery后执行jQuery代码
- 如何正确执行Jquery动画浮动