は、jQueryのタブに呼び出されていない。ここMVC 2

Question

<%@ Page Title="" Language="C#" MasterPageFile="~/Content/Master1.Master" AutoEventWireup="true" Inherits="System.Web.Mvc.ViewPage<List<TGF.class.abc>>" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     $('#tabContainer').tabs(); 

     $('#tab1').click(function() { 
      GetInfo('method1', '#info1'); 
     }); 

     $('#tab2').click(function() { 
      GetInfo('method2', '#info2'); 
     }); 

     $('#tab3').click(function() { 
      GetInfo('method3', '#info3'); 
     }); 

    }); 


    function GetInfo(url, div) { 
     debugger; 
     $(div).html('Loading...'); 

     $.ajax({ 
      Type: 'POST', 
      url: url, 
      success: function(html) { 
       $(div).html(html); 
      }, 
      error: function(html) { 
       $(div).html('An Error Occurred.'); 
      }, 
      cache: false 
     }); 

    } 

</script> 

<div id="tabContainer"> 

    <!-- Tab Names --> 
    <ul> 
     <li><a id='tab1' href="#info1"><span>name1</span></a></li> 
     <li><a id='tab2' href="#info2"><span>name2</span></a></li> 
     <li><a id='tab3' href="#info3"><span>name3</span></a></li> 
    </ul> 

    <div id="info1"> 
     <% Html.RenderPartial("Mysharedpage", Model, ViewData); %> 
    </div> 

    <div id="info2"> 
     <% Html.RenderPartial("Mysharedpage", Model, ViewData); %> 
    </div> 

    <div id="info3"> 
    <% Html.RenderPartial("Mysharedpage", Model, ViewData); %> 
    </div> 

</div> 

を変更私の共有ページ（Mysharedpage.ascx）、

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<List<TGF.dfg.method>>" %> 

<%@ Import Namespace="class.DataContracts" %> 
<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     debugger; 
     $("#SelectAll").click(CheckAll); 
    }); 
     function CheckAll() { 
      $("INPUT[type='checkbox']").attr('checked', $('#SelectAll').is(':checked')); 
     } 



</script> 

さて、問題は、私はTAB1をクリックしたとき、それはCheckAllつまり、いつものように動作しますです共有ページ（Mysharedpage.ascx）の（）関数が機能します。しかし、tab2またはtab 3をクリックすると、Jquery CheckAll（）関数は呼び出されず、機能しません。 tab2またはtab3をクリックすると、基本的にJqueryが呼び出されません。すべての3つのタブは同じ共有（.ascx）ページを呼び出します

すべての解決方法はありますか？

Answer 1

理由は、イベントハンドラは、私はサンプルコードで#SelectAllが表示されない

$("#SelectAll").on("click",CheckAll); 

http://api.jquery.com/on/

Answer 2

試すページに動的に追加された要素に付着していないですが、私はそれは一部だと仮定します動的に提供されるコンテンツの

祖先要素をリスナーとして委任する必要がありますが、サーバーから新しいコンテンツが配信されたときに破棄されないものが必要です。

$('#tabContainer').on('click', '#SelectAll', CheckAll); 

私は多少（私はMVC-2を気にしない、まったく.NETで動作しない）、プリレンダリングされたコードを見る大きな画像を欠けている、認めざるを得ない...しかし、それがどのように見えますCheckAll機能が3つの領域のそれぞれに流入しています。コードは実際には、メインページ上の1つのインスタンスだけの外にあるはずです。

MVC-2が特定のバージョンのjQuery（1.7より前のバージョン）に制限されている場合は、.on()関数を使用できません。以前のバージョンのjQueryでは代わりに.delegate()を使用することができました。構文の一部は単純にフリップフロップされます：

$('#tabContainer').delegate('#SelectAll', 'click', CheckAll);