jquery - jquery replace with を使用した後、メニュー要素が機能しない

Question

皆さん、こんにちは、私はここでちょっと混乱しています。jQueryを使用して要素を置き換えていますが、replaceWith();うまく機能します。ただし、変換後、クリック可能な要素は機能しなくなります。これが私のコードです

Answer 1

これは、要素を置き換えるとイベント バインディングが失われるためです。replaceWith()基本的に、要素とそのすべてのイベント バインディングを削除してから、新しい要素に置き換えます。イベント バインディングは保持されません。

代わりに使用してクリック イベントをバインドします.on()。

$('.menu').on('click', 'a', function() {
   ...
});

更新されたフィドル: http://jsfiddle.net/RTPhR/1/

Answer 2

http://jsfiddle.net/RTPhR/5/ イベントをリンクではなくメニューにバインドします。

$(document).ready(function() {
    $('.menu').on('click','a',function() {
        var $this = $(this),
            element = $this.attr('name');

        if (element == 'opt1') {
            alert('opcion 1');

        } else if (element == 'opt2') {
            alert('opcion 2');
            $this.replaceWith("<a href='#' name='cerrar'>VOLVER</a>");

        } else if (element == 'cerrar') {
            alert('close!');
        }
    });
});