에서 preventDefault는 두 번째 클릭

Question

작동하지 나는 다음과 같은 HTML 코드가 : 나는 어떤을 클릭하면

가

jQuery('.selectview').click(function (ev) { 

    ev.preventDefault(); 

    var alink = jQuery(this).attr('href'); 

    var view = getLinkVars(alink)["view"]; 
    var page = jQuery("#currentpageno").val(); 

    alert(alink); 
    alert(view); 
    alert(page); 

    run_ajax(view,page); 


}); 

코드는 잘 처음 실행 다음과 같이

<div> 
    <span>Products per page:</span> 
    <a class="selectview" href="/womens-clothing/shorts?page=1&view=20">20</a> 
    <a class="selectview" href="/womens-clothing/shorts?page=1&view=200">200</a> 
<div> 

와 jQuery를이 링크; 알리미가 표시되고 아약스 코드가 정상적으로 실행되지만 두 번째 클릭하면 전체 페이지가 새로 고쳐지고 경고가 표시되지 않습니다. 그런 다음 다시 클릭하면 작동하고, 다시 클릭하면 작동합니다.

내가 잘못 할 수 있습니까?

Answer 1

제 생각 엔 run_ajax이 (가) 링크를 새로운 것으로 바꿉니다. .click은 그 당시 선택기와 일치하는 요소에만 바인딩됩니다. 새로 추가 된 링크에는 클릭 이벤트가 바인딩되지 않습니다.

이벤트를 "실행"해야합니다. 그들과 같이 .on를 사용하여 바인딩 :

jQuery(document).on('click', '.selectview', function (ev) { 
    ev.preventDefault(); 
    // code... 
}); 

이 것 "위임"행사. DOM에 추가 될 때도 모든 .selectview 링크에 대해 실행됩니다.

Answer 2

run_ajax이 링크를 교체 할 경우 당신은 당신의 클릭 핸들러를 첨부 코드를 포장 할 수 있으며, 새로운 내용으로 링크를 교체 한 후 다음 run_ajax 내부에는 래퍼를 호출 할 수 있습니다

var setupClickHandlers = function(container) { 
    jQuery(container).find('.selectview').click(function (ev) { 

     ev.preventDefault(); 

     var alink = jQuery(this).attr('href'); 

     var view = getLinkVars(alink)["view"]; 
     var page = jQuery("#currentpageno").val(); 

     alert(alink); 
     alert(view); 
     alert(page); 

     run_ajax(view,page); 
    }); 
}; 
setupClickHandlers(container); 

을 run_ajax :

var run_ajax = function(view, page) { 
    // do your stuff here 

    // set up click handlers on the new content 
    setupClickHandlers(container); 
}