JavaScriptがASCXで動作していない - ASP NETユーザーコントロール

Question

背景： 私はajax：TabContainerとajax：TabPanel（s）の系列を含むasp：UpdatePanelを持っています。各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> 

3番目のタブは、いくつかの基本的なjQueryの/ JavaScriptを含んでいるのWebUser制御（UcThree）を含みます。次のようにするJavaScriptは、ユーザーコントロールのページの下部に配置されている：

<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ページはタブが表示され、3番目のタブをクリックすることロードされると、JavaScriptコードが有効なわけではありません。要素を見つけず、書式を適用しません。 aspxページが読み込まれ、タブが表示され、3番目のタブがクリックされ、ページが更新されると、javascriptは意図したとおりに動作します。

タブをクリックした後でページを更新しなくてもJavaScriptを有効にするにはどうすればよいですか？

Answer 1

すぐに呼び出される関数式（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); 

最初に修正し、何が起こるかを確認してください。