更新面板中模式弹出扩展器中的 Web 用户控件中的 jQuery 问题

Question

嗯，这个问题似乎有点令人困惑。

一方面我有一个Update Panel.在这个Update Panel里面，我有一个Modal Popup Extender，这个弹出窗口的内容是一个Web User Control。

在我的User Control中，我试图包含一个画廊滑块（http://bxslider.com/），必须简单地用JavaScript行初始化：

$(document).ready(function() {
  $('.bxslider').bxSlider();
}

，其中.bxslider是在其中定义库幻灯片的容器的类。

浏览 Web，当我单击启动弹出窗口的控件时，它会显示库控件（上一个、下一个和页脚栏，其中包含许多圆圈，代表库的每个幻灯片），但我无法看到库本身的内容。

现在，如果我访问Chrome控制台，就会神奇地渲染图库。

我尝试将初始化放在几个地方：

1. 在Web User Control标记文件中，在开头。

2. 在Web User Control标记文件中的末尾。

3. 在Web User Control Load事件中：

   protected void Page_Load(object sender, EventArgs e) {
     String script = "$(document).ready(function() { $('.bxslider').bxSlider(); }";
     ScriptManager.RegisterStartupScript((Control)this.Page, this.Page.GetType(), new Guid().ToString(), script, true);
   }
   

4. 在Web User Control LoadComplete事件（通过Init事件绑定）中：

   protected void Page_Init(object sender, EventArgs e) {
     this.Page.LoadComplete += new EventHandler(Page_LoadComplete);
   }
   protected void Page_LoadComplete(object sender, EventArgs e) {
      String script = "$(document).ready(function() { $('.bxslider').bxSlider(); }";
      ScriptManager.RegisterStartupScript((Control)this.Page, this.Page.GetType(), new Guid().ToString(), script, true);
   }
   

5. 在Modal Popup Extender OnLoad事件中。

我完全迷失了。有什么想法吗？

编辑：我认为这里的正确问题是：有没有办法建立一种方法，该方法仅在显示Modal Popup Extender而不是加载时引发？

Answer 1

嗯，终于解决了。

解决方案是将模态弹出窗口的TargetControlID分配给虚拟按钮，然后将我真正想要打开弹出窗口的控件声明为：

<asp:Button id="Button1" runat="server" OnClientClick="$find('PopupBehaivourID').show(); setTimeout(function () { $('.bxslider').bxSlider(); }, 100); return false;" Text="Show me!" />

这以一种"肮脏"的方式解决了问题，所以，如果有人有其他建议，将非常欢迎。

Answer 2

新方法！

相反，上一个在每次打开弹出窗口时重新定义滑块（导致其他问题），我直接在User Web Control中初始化滑块：

<script type="text/javascript">
  var slider;
  $(document).ready(function () {
    slider = $('.bxslider').bxSlider();
</script>

然后启动弹出窗口的控件显示为：

<asp:Button id="Button1" runat="server" OnClientClick="$find('PopupBehaivourID').show(); slider.reloadSlider(); return false;" Text="Show me!" />

即，我现在使用一种每次重新加载图库的方法。