Question

http://fh80.student.eda.kent.ac.uk/fyp/实例

如果你看到这个页面，点击运动/场地/运动员等，它可以让你浏览，但它都是通过AJAX调用的。

这工作正常，但我遇到内联链接问题。例如：

去体育

去田径

以红色显示“Hampden Park”链接

此链接不会在AJAX窗口中重新加载，而是在新窗口中加载...

这是应该尽可能使用类ajaxLink设置任何内容的代码，以将AJAX页面加载到div #grid中（与所有其他页面的方式相同）

var newLink = $('.ajaxLink');
            newLink.click(function (e) {
                $.ajax({
                    url: newLink.attr('href'),
                    type: 'POST',
                    success: function (data) {
                        $('#grid').remove();
                        successHandler(data)
                    }
                });
                e.preventDefault();
            });

以下是我正在使用的AJAX的代码（很长）：

//on document ready
$(function () {

    var ajaxElement = $('#browserMenu a, .ajaxLink');
    ajaxElement.on('click', function (e) {
        var src = $(this).attr('href');
        console.log(src);
        //this element clicked
        var thisEl = $(this);
        var runAJAX = (src && src != '#') ? true : false;
        if (runAJAX) {
            var targetElement = $('#grid');
            var parentElement = $('#ajaxParent');
            if (src === 'index.html') {
                $('#content').load('index.html #inner-content', function () {
                    $('.selected-menu').each(function () {
                        $(this).removeClass('selected-menu');
                    });
                    thisEl.addClass('selected-menu');
                    $('#jsCode code pre').load('js/nocomments.js');
                });
            } else {
                $.ajax({
                    url: src,
                    dataType: 'html',
                    statusCode: {
                        404: function () {

                            console.log(src + ' - not found');
                        }
                    },
                    cache: false,
                    error: function (jqXHR, textStatus, errorThrown) {

                        console.log(errorThrown);
                    },
                    success: successHandler
                });
            }

            e.preventDefault();
        }

        function successHandler(data) {
            targetElement.remove();
            //remove any selected classed
            $('.selected-menu').each(function () {
                $(this).removeClass('selected-menu');
            });
            thisEl.addClass('selected-menu');
            var newContent = $('<div id="grid" />');
            newContent
                .html(data) //grab the HTML from AJAX and place it in to <div id="content"> </div>                  
            .css("opacity", "0"); //hide the div until were ready to animate it in.
            parentElement.append(newContent);
            newContent.animate({
                opacity: 1
            }, 500);
            var newLink = $('.ajaxLink');
            newLink.click(function (e) {
                $.ajax({
                    url: newLink.attr('href'),
                    type: 'POST',
                    success: function (data) {
                        $('#grid').remove();
                        successHandler(data)
                    }
                });
                e.preventDefault();
            });
        }

    });

    $('#jsCode code pre').load('js/nocomments.js');
});

Answer 1

为什么您的代码不起作用

让我们逐步了解从用户加载页面到用户点击“Hampden Park”链接时发生的情况：

用户加载页面：

调用文档ready事件处理程序。它会向click添加$('#browserMenu a, .ajaxLink')事件处理程序，该处理程序与<div id="browserMenu">中的“体育”链接相匹配。此时文档中没有带“ajaxLink”类的元素，因此只有四个菜单链接才能获得此click事件处理程序。
用户点击“体育”菜单链接：

调用来自1.的click事件处理程序。它使用Ajax从Sports页面加载内容，然后将该数据传递给successHandler()。 successHandler()删除旧的<div id="grid">，并添加一个新的<div id="grid">新内容，这是一个jQuery UI Tabs小部件和第一个标签的内容（其他标签的内容使用Ajax加载）。

此时，successHandler()尝试向click添加$('.ajaxLink')事件处理程序，但文档中仍然没有带“ajaxLink”类的元素，因此不添加click个处理程序。
用户点击“田径”标签：

jQuery UI Tabs小部件使用Ajax加载Athletics页面的内容并显示它。
用户点击“汉普顿公园”链接：

此链接具有“ajaxLink”类，但如2.中所述，它没有click事件处理程序，因此浏览器会正常打开此链接。

更好的方法

对于动态加载内容的情况，使用event delegation更容易，而不是每次内容更改时都尝试绑定新的事件处理程序。

基本上，每个*事件都会从事件发生的原始元素“冒泡”到其父元素，父元素的父元素，一直到document元素。您可以将处理程序附加到父元素，以响应源自其子元素的事件。

从jQuery's documentation开始，您会注意到on()采用可选的selector参数。例如，有了这个：

$('body').on('click', handler);

handler()。当选择器出现时：

$('body').on('click', 'a', handler);

handler()

body。来自与选择器不匹配的元素的任何click事件都将被忽略（包括直接在body元素上发生的任何点击）。

*与许多其他情况一样，jQuery解决任何浏览器不一致问题，以便事件委派适用于所有事件。

在您的情况下

假设您希望一个事件处理程序处理菜单链接和内容链接的点击，您可以将click事件处理程序附加到<div class="slideWrapper">或<body>，因为它们是父/ <div id="browserMenu">和<div id="grid">的祖先：

$('body').on('click', '#browserMenu a, .ajaxLink', function (e) {
    // load content using Ajax
    // on success, replace old content with new
});

Answer 2

您需要使用jQuery的on函数来执行此操作。 Start here。 click不适用于动态内容，但新的事件API将捕获从AJAX响应生成的动态内容并插入到DOM中。这是该页面的Google示例：

$( "#dataTable tbody" ).on( "click", "tr", function() {
    alert( $( this ).text() );
});

它的作用是将所有传入的tr元素捕获到dataTable＆＃39; tbody并为其提供click个事件。

Answer 3

它不起作用，因为您需要将函数附加到未被ajax加载的元素。

$('#grid').on('click', '.ajaxlink', function() {
    // do stuff
});

由于ajax调用未修改#grid，因此事件处理程序将保持不变。

Answer 4

在回复我的评论时，由于没有验证，我提出了另一种恢复数据的方法，避免了资源密集的Ajax调用。

原则是调用一次静态数据和关注器。

例如，您有grid div。

第一次点击＆＃34;体育＆＃34;，验证没有div grid-sport时，您在grid-sport中创建div grid，其中包含div {{1}你调用了ajax来填充grid-class div。

点击＆＃34;田径＆＃34; ，你隐藏了课程grid-sports，确认没有div grid-class，你创建了一个grid-athletics div grid-athletics（在grid-class div之后{ {1}} div），你调用了ajax来填充grid-sports。

等所有链接......

如果你再次点击＆＃34; Athletics＆＃34;例如，您隐藏grid类的div，并验证是否存在div grid-athletics，如果您的内容是静态的（针对用户会话），则会显示标记grid-class否则，如果内容应该是动态的，则删除其内容并重新发送ajax调用。

使用此方法，您可以调用一次静态内容。

我希望我已经理解（由谷歌翻译:)）

从AJAX页面内的内联链接重新加载AJAX

4 个答案:

为什么您的代码不起作用

更好的方法

在您的情况下