のpreventDefaultは、第二のクリック

Question

に取り組んでいないI次の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がありますリンク。アラートが表示され、Ajaxコードはうまく動作しますが、2回目にクリックするとページ全体がリフレッシュされ、アラートは表示されません。それから私は再びそれをクリックすると、それをクリックすると、それは再び動作します。

私は間違っていますか？

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

in run_ajax：

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

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