的preventDefault不工作的第二次點擊

Question

我有以下的html代碼：

<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是如下：

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); 


}); 

的代碼運行正常第一次，如果我點擊任何的鏈接;我看到警報和ajax代碼運行良好，但是當我第二次點擊它時，整個頁面都會刷新，並且不會顯示警報。然後，如果我再次點擊它，它會起作用，然後當我再次點擊它時，它會起作用，依此類推。

我會做什麼錯？

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