Reload AJAX from the inline link already on the AJAX page

Question

http://fh80.student.eda.kent.ac.uk/fyp/ Live example

If you see this page, select sports / places / athletes, etc., this allows you to view, but all this is called through AJAX.

This works fine, but I have problems with inline links. For instance:

Go to the sport

Go to track and field

Go to the "Hampden Park" link in red

This link does not reload in the AJAX window, it loads it into a new window ...

This is the code that should set the class ajaxLinkto load the AJAX page into the div as much as possible #grid(just like for all other pages).

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

Here is the code for AJAX that I am using (it is long):

//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.

• "" :

  click 1.. "" Ajax, successHandler(). successHandler() <div id="grid"> <div id="grid"> , jQuery UI Tabs ( Ajax).

  successHandler() click $('.ajaxLink'), no "ajaxLink" , no click.

• " ":

  jQuery UI Tabs Athletics Ajax .

• "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
});

Answer 2

on jQuery. . click , API , AJAX DOM. Google :

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

, , tr dataTable tbody click.

Answer 3

, , ajax.

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

#grid ajax, .

Answer 4

, , , ajax, .

, .

, grid div.

, "", , div grid-sport, div grid-sport grid div grid-class, ajax grid-sports div.

" ", grid-class, , div grid-athletics, div grid-athletics grid-class ( grid-sports div grid div) ajax, grid-athletics.

...

If you click on Athletics again, for example, you hide the div that the class is grid-classthere, make sure that the div exists grid-athletics, if your content is static (for a user session), show you the tag grid-athletics, otherwise, if the content should be dynamic, you delete its contents and redo the ajax call.

With this method, you invoke your static content.

I hope I understand (Google translation :))