Javascript 在 ASCX 中不起作用 – ASP NET 用户控件

Posted 2023-05-08

【中文标题】Javascript 在 ASCX 中不起作用 – ASP NET 用户控件

【英文标题】：Javascript not working in ASCX – ASP NET User Control

【发布时间】：2017-01-18 00:44:22

【问题描述】：

背景： 我有一个 asp:UpdatePanel，它包含一个 ajax:TabContainer 和一系列 ajax:TabPanel(s)。每个 TabPanel 都包含一个 Web 用户控件。结构如下：

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">

    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="CustomerTabs" />
    </Triggers>

    <ContentTemplate>
        <ajax:TabContainer ID="CustomerTabs" OnDemand="true" runat="server" AutoPostBack="true" EnableTheming="true" OnActiveTabChanged="CustomerTabs_ActiveTabChanged">

            <ajax:TabPanel ID="Tab1" runat="server" CssClass="TabCss" HeaderText="Heading 1" OnClientClick="TabChanged" TabIndex="1">
                <ContentTemplate>
                    <uc1:UcOne ID="UcOne1" runat="server" />
                </ContentTemplate>
            </ajax:TabPanel>

            <ajax:TabPanel ID="Tab2" runat="server" CssClass="TabCss" HeaderText="Heading 2" OnClientClick="TabChanged" TabIndex="2">
                <ContentTemplate>
                    <uc1:UcTwo ID="UcTwo1" runat="server" />
                </ContentTemplate>
            </ajax:TabPanel>

            <ajax:TabPanel ID="Tab3" runat="server" CssClass="TabCss" HeaderText="Heading 3" OnClientClick="TabChanged" TabIndex="3">
                <ContentTemplate>
                    <uc1:UcThree ID="UcThree1" runat="server" />
                </ContentTemplate>
            </ajax:TabPanel>

        </ajax:TabContainer>
    </ContentTemplate>
<asp:UpdatePanel>

第三个选项卡包含一个 webuser 控件 (UcThree)，其中包含一些基本的 jquery/javascript。 javascript放置在usercontrol页面的底部如下：

<script type="text/javascript">
  $(function() 

    var $items = $('#vtab>ul>li');
    $items.click(function() 
      $items.removeClass('selected');
      $(this).addClass('selected');

      var index = $items.index($(this));
      $('#vtab>div').hide().eq(index).show();
    ).eq(0).click();

  );
</script>

问题： 当加载显示选项卡的aspx页面并单击第三个选项卡时，javascript代码不生效；它没有找到元素并应用格式。当加载显示选项卡的 aspx 页面并单击第三个选项卡然后刷新页面时，javascript 会按预期工作。

点击标签后无需刷新页面，javascript如何生效？

【问题讨论】：

使用线程解决问题：***.com/questions/338702/…

【参考方案1】：

从您的 javascript 代码看来，您正在尝试实现立即调用函数表达式 (IIFE)，但没有传递任何参数。另外，我不确定您为什么要在前面添加 $ 。我认为你想要的是：

    (function($) 

    var $items = $('#vtab>ul>li');
    $items.click(function() 
      $items.removeClass('selected');
      $(this).addClass('selected');

      var index = $items.index($(this));
      $('#vtab>div').hide().eq(index).show();
    ).eq(0).click();

  )(jQuery);

尝试先解决这个问题，看看会发生什么。

【讨论】：

以上代码在场景中不起作用。问题似乎在于 asp .net 控件在页面加载时隐藏了这些元素，因此当文档准备好时它们无法访问。有关 $ 语法的更多信息，请参阅：api.jquery.com/ready