Question

我在页面上有一个手风琴控件（使用jQuery）。当我将accordion插入更新面板时，在updatepanel之外设置一个按钮作为触发器，然后单击按钮，手风琴停止工作。如果我删除了updatepanel，它就会开始工作。

为什么呢？我该如何解决这个错误？我是否必须重新实例化手风琴脚本/插件，如果是，那么如何？

<script src="Scripts/ddaccordion.js" type="text/javascript"></script>
<script type="text/javascript">
   ddaccordion.init({
        headerclass: "silverheader", //Shared CSS class name of headers group
        contentclass: "submenu", //Shared CSS class name of contents group
        revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
        mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
        collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
        defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
        onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
        animatedefault: false, //Should contents open by default be animated into view?
        persiststate: true, //persist state of opened contents within browser session?
        toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
        togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
        animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
        oninit: function(headers, expandedindices) { //custom code to run when headers have initalized
            //do nothing
        },
        onopenclose: function(header, index, state, isuseractivated) { //custom code to run whenever a header is opened or closed
            //do nothing
        }
    })
</script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
      <div class="applemenu">
        <div class="silverheader"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>
        <div class="submenu">
            Some random content here<br />
       </div>
       <div class="silverheader"><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></div>
       <div class="submenu">
            Some random content here<br />
       </div>
       <div class="silverheader"><a href="http://www.javascriptkit.com">JavaScript Kit</a></div>
       <div class="submenu">
            Some random content here<br />
       </div>
       <div class="silverheader"><a href="http://www.cssdrive.com">CSS Drive</a></div>
       <div class="submenu">
           Some random content here<br />
          <img src="http://i27.tinypic.com/sy7295.gif" />
       </div>
       <div class="silverheader"><a href="http://www.codingforums.com">Coding Forums</a></div>
       <div class="submenu">
           Some random content here<br />
       </div>       
     </div>    
   </ContentTemplate>
<Triggers>
             <asp:AsyncPostBackTrigger ControlID="Button1" />
         </Triggers>
</asp:UpdatePanel>

Answer 1

当从DOM中删除元素时，即使您替换具有相同元素的元素，它们的事件处理程序也会使用它们。您需要重新初始化事件处理程序，或者查看使用jQuery的.live()功能。

Answer 2

您需要维护Jquery小部件的结构。我通过更新面板在accordion div的sub-div中包围我想要的控件，实现了你想要的。因此，您应该保持以下结构：

Accordion Div
标题为sub div 1的标题3
div 1
更新面板
div 1将使用Ajax技术刷新的内容。

依此类推，当然你需要脚本管理器，所以不要忘记插入一个：）

手风琴停止使用更新面板

2 个答案: