选项卡更改 MVC 2 上未调用 Jquery答案

【问题标题】：Jquery not invoked on tab change MVC 2选项卡更改 MVC 2 上未调用 Jquery
【发布时间】：2012-01-05 06:14:50
【问题描述】：

<%@ 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) 页面

有什么办法吗？

【问题讨论】：

标签： jquery asp.net-mvc-2

【解决方案1】：

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

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

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

我不得不承认，我有点错过了看到预渲染代码的大图（我根本不使用 .NET，更不用说 MVC-2）......但它看起来像 CheckAll 函数被空运到三个区域中的每一个。代码实际上应该在主页面上，仅作为一个实例。

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：