用户控件中的jQuery脚本仅在页面上运行该控件的一个实例

Question

我有一个带有gridview的CollapsiblePanelExtender控件,我把它放在一个用户控件中.

我将以下脚本添加到User控件的末尾以平滑动画:

<script type="text/javascript">

    function pageLoad(sender, args) {
        $find(("<%= CPE.ClientID %>"))._animation._fps = 35;
        $find(("<%= CPE.ClientID %>"))._animation._duration = 0.5;
    }

</script>

当我运行页面时,只有第二个手风琴被平滑,第一个是默认的缓慢.

以下是运行时脚本:

<script type="text/javascript">

    function pageLoad(sender, args) {
        $find(("MainContent_AccordionGV1_CPE"))._animation._fps = 35;
        $find(("MainContent_AccordionGV1_CPE"))._animation._duration = 0.5;
    }

</script>

....

    function pageLoad(sender, args) {
        $find(("MainContent_AccordionGV2_CPE"))._animation._fps = 35;
        $find(("MainContent_AccordionGV2_CPE"))._animation._duration = 0.5;
    }

</script>

所以它应该按照这个工作.知道为什么不是吗？

谢谢.

加成:

我尝试手动将其添加到页面而不是用户控件,相同的行为.

    <script type="text/javascript">

        function pageLoad(sender, args) {
            $find(('<%= AccordionGV1.FindControl("CPE").ClientID %>'))._animation._fps = 35;
            $find(('<%= AccordionGV1.FindControl("CPE").ClientID %>'))._animation._duration = 0.5;
        }
</script>

当我添加相同的行但是对于AccordionGV2时,第一个停止工作.

让我觉得这比一个更大的问题.

Answer 1

您应该在UserControl中使用此脚本:

(function () {
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);

    function pageLoadedHandler() {
        $find(("<%= CPE.ClientID %>"))._animation._fps = 35;
        $find(("<%= CPE.ClientID %>"))._animation._duration = 0.5;
    }
})();

这样,每个用户控件都不会覆盖pageLoad之前定义的函数,并将为pageLoaded事件使用自己的处理程序