partial postbacks and jquery
我遇到了一个问题,在部分回发时,我的一些 jquery 已停止工作。我有一个带有两个单选按钮的页面,一个用于显示数据,另一个用于显示图片库。我使用 jquery 来显示和隐藏其中一个。
我还有一个模态弹出扩展器,它位于更新面板内。当我关闭 mpe 并切换回图片库时,一些代码停止工作。基本上它是一个画廊,可以在一定时间间隔内切换图像。还有一些缩略图可以做同样的事情(打开一个间隔)和它的缩略图不起作用。
HTML
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<%@ Register Src=”~/User_Controls/modify_image_table.ascx” TagName=”IMG” TagPrefix=”uc2″ %>
<%@ Register Src=”~/User_Controls/ImageLoaderUC.ascx” TagName=”ImageLoader” TagPrefix=”uc8″ %> <ContentTemplate> |
Javascript
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
$(document).ready(function (e) {
// Execute the slideShow slideShow(6000); thumbInt(); // Assign int to thumbnail list items clearShowClass(); // Prevents multiple li having .show function clearShowClass() { function timedInterval() { $(‘#footer img’).mouseover( function () { $(‘#footer img’).mouseout( $(this).animate({ function thumbInt() { $(‘#footer li’).removeClass(‘highlight’).add($(‘#footer li:nth-child(‘ + event.data.iteration + ‘)’).addClass(‘highlight’).add($(‘#footer li:nth-child(‘ + event.data.iteration + ‘) img’))); }); function slideShow(speed) { //Set the opacity of all images to 0 //Get the first image and display it (set it to full opacity)
//Get the first thumbnail and change css
//Call the gallery function to run the slideshow //Pause the slideshow on mouse over content function () { function () { function gallery() { //Get next image, if it reached the end of the slideshow, rotate it back to the first image
//Set the fade in effect for the next image, show class has higher z-index // Hide the current image //if no thumbnails have the highlight class, grab the first thumbnail var nextThumb = ($(‘#footer li:last’).hasClass(‘highlight’)) ? $(‘#footer li:nth-child(1)’) : $(‘#footer li.highlight’).next($(‘#footer li’));
nextThumb.addClass(‘highlight’); |
基本上我想知道更新面板会如何影响 $(document).ready?
谢谢
- @mshsayem 有正确的答案。您应该将您的评论移至回答,以便它可以被接受。
$(document).ready 中的代码不会再次被调用以进行部分回发;如果您需要 $(document).ready 函数中的某些功能,那么我建议将这些代码重构为一个函数(例如 initAll())并在部分回发后,从服务器端(在您的事件处理程序中)使用 ClientScriptManager.RegisterClientScriptBlock 函数调用该功能如:
1
2 3 4 |
…
// last line in your partial postback handler ScriptManager.RegisterClientScriptBlock(Upd1,typeof(UpdatePanel),”__updp__”,”initAll();”, true); |
- 我尝试创建一个名为 initAll() 的 javascript 函数,并将我的其他 js 函数放入其范围,并且我还在 PreRender 处理程序中使用了 ScriptManager。但它仍然无法正常工作。只有我的一些 javascript 工作。
- 它不应该在 PreRender 处理程序中;但是在更新面板内控件的事件处理程序中;此外,在 initAll 内,您应该只放置那些更新/使用更新面板内控件状态的 javascript
- 好的,我会尝试的。我正在使用用户控件,如果我错了,请纠正我,从用户控件调用父控件不是一个好习惯。用户控件应该独立于其父级。
- 是的,调用父控件不是一个好习惯。在这种情况下,我的想法是将上述代码package到一个函数中,该函数首先检查请求是否与 ScriptManager.GetCurrent(this).IsInAsyncPostBack 异步,然后注册脚本。每次都从主页的 Page_Load 调用该函数。 (很痛苦,我同意)
来源:https://www.codenong.com/10013891/