2

次の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 コードは正常に実行されますが、2 回目にクリックすると、ページ全体が更新され、アラートは表示されません。次に、もう一度クリックすると機能し、もう一度クリックすると機能します。

私は何が間違っているのでしょうか？

4

2 に答える 2

7

私の推測ではrun_ajax、リンクを新しいものに置き換えています。 .clickその時点でセレクターに一致した要素にのみバインドします。新しく追加されたリンクには、クリック イベントがバインドされません。

イベントを「ライブ」にする必要があります。.on次のようにバインドします。

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

これにより、イベントが「委任」されます。.selectviewリンクがいつ DOM に追加されても、すべてのリンクに対して実行されます。

于 2012-04-04T18:11:30.120 に答える
0

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);
}
于 2012-04-04T18:24:51.500 に答える