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

首先尝试修复，看看会发生什么。

Javascript无法在ASCX中工作 - ASP NET用户控件

1 个答案: