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

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"链接时发生的情况:

1. 用户加载页面:

   ready调用文档事件处理程序.它添加了一个click事件处理程序$('#browserMenu a, .ajaxLink'),它匹配里面的"体育"链接<div id="browserMenu">.此时文档中没有带"ajaxLink"类的元素,因此只有四个菜单链接才能获得此click事件处理程序.

2. 用户点击"体育"菜单链接:

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

   此时,successHandler()尝试添加click事件处理程序$('.ajaxLink'),但文档中仍然没有带"ajaxLink"类的元素,因此不click添加任何处理程序.

3. 用户点击"田径"标签:

   jQuery UI Tabs小部件使用Ajax加载Athletics页面的内容并显示它.

4. 用户点击"Hampden Park"链接:

   此链接具有"ajaxLink"类,但如2.中所述,它没有click事件处理程序,因此浏览器通常会打开此链接.

更好的方法

对于动态加载内容的情况,使用事件委派更容易,而不是每次内容更改时尝试绑定新的事件处理程序.

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

从jQuery的文档中,您会注意到它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
});