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 () не вызывается и не работает. По сути, Jquery не вызывается при нажатии на tab2 или tab3. Все 3 вкладки вызывают одну и ту же общую (.ascx) страницу

Есть решение?

Answer 1

Я не вижу #SelectAll в примере кода, но я предполагаю, что это часть динамически предоставляемого контента.

Вам необходимо делегировать элементу-предку как прослушиватель, но тот, который НЕ уничтожается при поступлении нового контента с сервера.

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

Я должен признать, что мне немного не хватает общей картины, в которой виден предварительно отрендеренный код (я вообще не работаю с .NET, не говоря уже о MVC-2) ... но выглядит, как функция CheckAll будучи доставленным в каждую из 3 областей. Код действительно должен быть снаружи, как ОДИН экземпляр, на главной странице.

Кроме того, если MVC-2 ограничивает вас определенной версией jQuery (до 1.7), у вас не будет доступна функция .on(). Для предыдущих версий jQuery вы могли бы использовать .delegate() вместо этого. Часть синтаксиса просто перевернута:

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

Answer 2

причина в том, что обработчики событий не присоединяются к динамически добавляемым элементам на странице. Try

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

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