选项卡更改MVC 2时未调用Jquery

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时，它就像往常一样工作，即共享页面(Mysharedpage.ascx)上的CheckAll()函数工作。但是当我单击tab2或tab 3时，Jquery CheckAll()函数没有被调用，也无法工作。当点击tab2或tab3时，Jquery基本上不会被调用。所有3个选项卡都调用相同的共享(.ascx)页面

有什么解决方案吗？

Answer 1

原因是事件处理程序不会将自身附加到动态添加到页面try的元素

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

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

Answer 2

我在示例代码中没有看到#SelectAll，但我认为它是动态提供的内容的一部分。

您需要委托祖先元素作为侦听器，但当新内容从服务器飞入时不会被销毁。

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

我必须承认，我有点错过了预渲染代码(我根本不使用.NET，更不用说MVC-2)……但是看起来CheckAll函数正在飞入这3个区域中的每一个区域。代码实际上应该在主页面的外部，仅作为一个实例。

此外，如果MVC-2限制您只能使用特定版本的jQuery (1.7之前的版本)，您将无法使用.on()功能。对于以前版本的jQuery，您可以改用.delegate()。语法的一部分只是简单的反转：

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