jquery - 아약스 코드, 무엇이 잘못되었는지 모르겠 음

Question

누군가이 코드의 문제점을 알 수 있습니까?

ajax_load 함수로로드되는 페이지에 4 또는 5 개의 링크가 있습니다. 이것은 언제나 그들 사이를 클릭하면 작동합니다. 링크를 클릭하면 Google 크롬에 항상 표시되는 ajax_load 함수에 2 개의 console.log 경고가 표시됩니다.

문제는 form_submit 함수를 호출하는 '제출'버튼을 클릭하면 시작됩니다. 항상 작동합니다 - 콘솔 로그에서 성공한 메시지를받습니다.하지만 링크로 돌아 가면 대부분의 경우 첫 번째 콘솔 로그 메시지 만 나타납니다. ('form_submit'을 처리하기 전에이 메시지를 내놓았다.)

이 도착하지 않습니다 누군가가 뭐가 잘못 말해 수 있다면

if (current_url_method != url + method) { 
    console.log('You got to the url + method part. But sometimes I dont get this far.'); 
    current_url_method = url + method; 

어쨌든, 나는 감사하게 될 거라고. 여기에 있습니다 :

$(document).on("ready", function(){ 

//I want to load content into the '.page-content' class, with ajax 

console.log('load ajax when document starts. This always works.'); 
    var ajax_loaded = (function(response) {   

    $(".page-content") 

    .html($(response).filter(".page-content"));  

    $(".page-content .ajax").on("click",ajax_load); 



    }); 

//use the ajax function below for submitting forms 

var form_submit = (function(e) { 
    console.log('form_submit is working. This always works.');   
    e.preventDefault();    

    var url = $(this).attr("action");  
    var method = $(this).attr("method");  


    var data = {}     
    $(this).find("input, textarea, select").each(function(i){ 
    var name = $(this).attr("name");  
    var value = $(this).val();   

    data[name] =value;    

    }); 

    $.ajax({      
    "url": url,     
    "type": method,     
    "data": data,    
    "success": ajax_loaded, 
    "error": function() {alert("bad");}  
    }); 

}); 

//the function below is called by links that are described 
//with the class 'ajax', or are in the div 'menu' 

var history = [];     

var current_url_method;    

var ajax_load = (function(e) { 


console.log('load ajax on clicks. This always works.');   
    e.preventDefault();    


    history.push(this);    
    var url =$(this).attr("href");   
    var method = $(this).attr("data-method"); 

    if (current_url_method != url + method) { 
    console.log('You got to the url + method part. But sometimes I dont get this far.'); 
    current_url_method = url + method;  

$.ajax({     
    url: url,    
    type: method, 
    async: false,      
    success: ajax_loaded  
}); 
    } 

}); 


//monitor for clicks from menu div, or with 
//the ajax class, or the 'submit button'. 
//why the trigger? 

$("#menu a").on("click",ajax_load); 
$(".ajax").on("click",ajax_load); 
$("#menu a.main").trigger("click"); 
$(".search-box form").on("submit", form_submit); 


}); 

Answer 1

: 이전과 동일한 URL + 방법으로 링크를 클릭하면

if (current_url_method != url + method) { 

, 해당 조건이되지 않습니다 사실이고 당신은 로그 메시지를받지 못할 것입니다. 그러나 AJAX 호출은 여전히 ​​발생합니다.

언제든지 로그 메시지를 보내려면 console.log() 블록을 호출하여 if() 블록을 호출하십시오. 그러나 변수가 current_url_method 인 이유는 없습니다. 이 메시지를 기록할지 여부를 결정하는 데 유일한 용도가 있습니다.

Answer 2

문제가 클로저 인 것으로 생각됩니다. 시도 :

는 로그 메시지는 다음의 조건에 표시됩니다

var ajax_loaded = function(response) { 
    $(".page-content") .html($(response).filter(".page-content")); 
    $(".page-content .ajax").on("click",ajax_load); 
};