jqueryで置き換えたときにonclickイベントを追加する

Question

jqueryのreplaceWithにonclickイベントを設定する際に問題があります。 2回目のonclickイベントの私の機能は機能していません。これは私のサンプルコードです。

sample.html

<div id = "first_div" onClick = "replace()">First</div> 

my.js

function replace() { 
    $('#first_div').replaceWith("<div id = 'sec_div' onclick='flyout('fb')'>Second</div>"); 
} 

私はそれが動作first_divをクリックします。 2nd_divが表示されますが、2番目のdivをクリックすると何もしません。

function flyout(data){ 
    if (data == "fb") $('#sec_div').replaceWith("<div>Last</div>"); 
} 

Answer 1

コードが機能しないのは、#sec_div要素の 'onclick'に関数を渡していないということです。 onclick="flyout('fb');"と定義されていますが、フライアウト関数は何も返しません。以下のコードを変更してflyoutが関数を返し、dataパラメータに同じ値のこの同じ関数を使用する場合は、dataの値をそのクロージャにカプセル化します。

また、私はあなたのHTMLとあなたのJavascriptを分離するのに役立つ解決策を提供しています。 jqueryを使用すると、delegateメソッドを使用して、関数を任意のイベントにバインドすることで実現できます。

HTML：

<div id="first_div">First</div> 

JS：

$("body").delegate('#first_div', 'click', replace); 
$("body").delegate('#sec_div', 'click', flyout("fb")); 

// change replace to: 
function replace() { 
    $(this).replaceWith("<div id='sec_div'>Second</div>"); 
} 
// change flyout to: 
function flyout(data){ 
    return (function(){ 
     if (data == "fb") { 
      $(this).replaceWith("<div>Last</div>"); 
     } 
    }); 
} 

EDIT： live方法の最新のjQueryのドキュメントの使用によるが廃止されて、代わりにdelegateを使用しています。

Answer 2

新しいdivにバインドされたクリックイベントはありません。

replaceWith（）コールの後に新しいリスナーを追加するか、live（）を使用してドキュメントレベルでリッスンします。

Answer 3

関数replaceで正しくエスケープしていません。

onclick='flyout('fb')' 

部分には3つの4重引用符があります。 2番目の引用符は最初の引用符を閉じ、3番目の引用符は新しい文字列を開始します。

element="<div id = 'sec_div' onclick='flyout(\"fb\")'>Second</div>" 
$('#first_div').replaceWith(element); 

はまた、以下のhttp://jsfiddle.net/5Stuh/