0

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>");
}
4

3 に答える 3

1

関数replaceで適切にエスケープしていません。The

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/もチェックアウトしてください

于 2012-02-20T16:39:48.277 に答える
1

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

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

于 2012-02-20T16:33:20.253 に答える
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>"); 
       }
    });
}

編集: 最新の jquery ドキュメントによると、このliveメソッドの使用は推奨されていませんdelegate。代わりに使用してください。

于 2012-02-20T16:34:32.643 に答える