JQuery와 하중() 함수 페이지

Question

를 다시로드이 코드가 있습니다

$("a.ajax").on('click', function() { 
    ajax_link(); 
}); 

function ajax_link() { 
    $('#ajax_load').remove(); // Remove js 
    $('#section').html('<?php echo $this->ajax_loading; ?>'); 
    setInterval(function() { 
     $('#section').load($(this).attr('href')+'&ajax=true'); 
     return false; 
    }, 1000); 
} 

을하지만 링크를 클릭 할 때 대신 내용을로드하는 페이지를 다시로드합니다. 아무도 이유를 아나요?

코드의 나머지 부분을 추가하여 해당 사항이 없는지 확인했습니다.

Answer 1

페이지가 다시로드되는 원인이되는 앵커의 기본 동작을 방지해야합니다. 이벤트 인수에서 사용할 수있는 preventDefault() 메소드를 통해이 작업을 수행 할 수 있습니다.

$("a.ajax").on('click', function(e){ 
     e.preventDefault(); 
     ajax_link.call(this); 
}); 

또 다른 문제는 setInterval을 콜백 this 내부의 윈도우가 아닌 당신이 클릭 앵커를 나타내는, 그래서 변수에 this 컨텍스트를 캐시하고 사용한다는 것입니다.

function ajax_link(){ 
var self = this; //Cache it here 
setInterval(function(){ 
    $('#section').load(self.href +'&ajax=true'); 
     return false; //You dont need this. 
    },1000); 
} 

또는 그냥 바인드

:

$("a.ajax").on('click', ajax_link); 


function ajax_link(e){ 
var self = this; //Cache it here 
e.preventDefault(); 
setTimeout(function(){ //Use setTimeout 
    $('#section').load(self.href +'&ajax=true'); 
     return false; //You dont need this. 
    },1000); 
} 

Answer 2

사용 e.preventDefault()

는 이벤트의 기본 동작이 트리거되지 않습니다.

$("a.ajax").on('click', function (e) { 
    e.preventDefault(); 
    ajax_link(); 
}); 

또는 jQuery를 최신 버전을 사용하는 경우 당신은 당신의 HTML

<a class="ajax" href="javascript:void(0)">Load ajax</a> 

Answer 3

을 수정할 수 있습니다, 당신은 당신의 클릭 이벤트 핸들러에서 false를 반환 할 수 있습니다. false를 돌려주는 것은, Defect() 및 stopPropagation()를 방아쇠합니다. StackOverflow에 대한 참조가 있습니다. event.preventDefault() vs. return false