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

Question

背景： 我有一个 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如何生效？

Answer 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);

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