0

現在作成しているアプリケーションでは、サーバーに対していくつかのAJAX呼び出しを実行し、ページの一部を部分的なビューに置き換えています。jQuery関数を使用して「置き換えられた」ボタンを除いて、すべてが正しく機能しているreplaceWith()ようです。

私の実際のコードでは<div>、ボタンだけでなく全体を置き換えていますが、ここにあるコードは私の問題を説明するのに役立ちます。

ボタンがクリックされると、JavaScriptが呼び出され、そのボタンが更新されます。ただし、そのボタンをもう一度クリックしてみてください。同じJavaScriptが呼び出されたり実行されたりすることはありません。私が行方不明になっているいくつかの切断がここにあります。（私の考えでは、「updateButton」のクラスのボタンがクリックされるたびに、javascriptが実行される必要があります。）助けてください。

ありがとう

4

2 に答える 2

2

イベントの委任。

$(document).on('click','.updateButton',function (e) {
            e.preventDefault();
    var now = new Date().getTime();

   var newButton = "<span class='btn btn-info updateButton'>Update Button " + now + "</span>"

    $(this).replaceWith(newButton);
});

デモ： http： //jsfiddle.net/D2RLR/896/

削除されるボタンにイベントをバインドする（したがって、イベントバインドを失う）代わりに、削除されないがそのボタンの祖先である要素にイベントをバインドします。

于 2012-07-27T19:55:10.473 に答える
0

（Kevin Bの回答のように）ドキュメントにイベントハンドラーをバインドする代わりに、作成した新しいボタンに再バインドして、古いボタンを置き換えます。これは、イベントが発生する前にイベントがDOMツリーからドキュメントまでバブルする必要がないため、イベント処理のより効率的な方法です。

http://jsfiddle.net/D2RLR/900/

var replaceBtn = function(domBtn,e) {
   e.preventDefault();
   var now = new Date().getTime();

   var newButton = $("<span class='btn btn-info updateButton'>Update Button " + now + "</span>");
    newButton.on('click',function(event) {
        replaceBtn(this,event);
    });

    $(domBtn).replaceWith(newButton);

}

$('.updateButton').click(function(event) {
     replaceBtn(this,event)
});
于 2012-07-27T20:00:36.617 に答える