通过外部页面和history.pushState一起进行的Ajax请求

Question

There is a way for combine these two technologies so that they work together when we are alredy in the div "result" ?

Let's see the problem.. We have the first code that do the ajax request

    var http_request = false;
function makeRequest(url,getvar,funzione) {
    http_request = false;
    if (window.XMLHttpRequest) { // Mozilla, Safari,...
        http_request = new XMLHttpRequest();
        if (http_request.overrideMimeType) {
            //http_request.overrideMimeType('text/xml');
            // See note below about this line
        }
    } else if (window.ActiveXObject) { // IE
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }

    if (!http_request) {
        alert('Errore :( Non riesco a creare unna connessione XMLHTTP');
        return false;
    }
    http_request.onreadystatechange = funzione;
    http_request.open('POST', url, true);
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    http_request.send(getvar);

}

function alertContents() {

    if (http_request.readyState == 4) {
        if (http_request.status == 200) {
            //alert(http_request.responseText);
    document.getElementById("result").innerHTML = http_request.responseText;
        } else {
            alert('C\'è stato un problema alla connessione.');

        }
    }else{
    document.getElementById("result").innerHTML ="loading";
}

}

And another function that edit the andress bar..

jQuery(document).ready(function() {
   $('a.clickurl').click(function(event) {
      var currentPage = document.location.pathname.substring(document.location.pathname.lastIndexOf('/') + 1);
      if ($(this).attr('href') != currentPage){ 
         if (history && history.pushState) {  
            history.pushState(null, document.title, $(this).attr('href'));
               $.get($(this).attr('href'), {ajax:'1'}, function(data, text, xhr) {
                  pageSlider(data, text, xhr);
               });

            event.preventDefault(); 
         }
     }
});

after the first istance we got result on the div.. and up to here everything is working correctly, but how let the function work also in the links inside the "result" div?

setting a href="#" the ajaxrequest work correctly and just reflash the "result" div.. but if i set an different address loads the entire page..

ps. i already tried return false;

Answer 1

Problem is the fact that you are not binidng events to the dynamic content. You need to either rebind or use event delegation.

$(document).on("click", 'a.clickurl', function(event) { 

or even better if all the links are only in the result div

$("#result").on("click", 'a.clickurl', function(event) {