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>

Here is my shared page (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>

Now, the issue is when I click tab1 then it works as usual, i.e. the CheckAll() function on the shared page (Mysharedpage.ascx) works. But when I click on tab2 or tab 3 , the Jquery CheckAll() function is not called and is not working.
Basically the Jquery is not getting called when clicked on tab2 or tab3. All the 3 tab call the same shared (.ascx) page

Any solution ?

Answer 1

the reason is event handlers do not attach themselves to the dynamically added elements to the page try

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

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