7

これが要約された例です。

.chat-replyクラスには、クリックイベントハンドラーがバインドされていることに注意してください。

HTML（返信ボタン）：

<div class="container">
    <a href="#" class="btn small chat-reply">Reply</a>
</div>

このjQuery関数は、データベースに保存するメッセージをサーバーに送信する別のボタンをクリックしたときに呼び出されます。これはajaxを介して行われ、正常に行われます。前述の.ajax（）success（）コールバックでは、この関数は次のように呼び出されます。

$.ajax({
      type      :  'GET',
      url       :  '/some_controller/some_method',
      success   :  function(data) {

      $('.container').replaceWith(data);
    }
});

上記の成功コールバックの「データ」は、子の.chat-replyボタンを含む.containerdiv全体を置き換えます。このreplaceWith（）の後、クリックイベントはボタンにバインドされなくなります。

論理的には、エンドユーザーにタイムラインにメッセージを投稿してもらい、画面を更新せずにそのメッセージをタイムラインに表示させようとしています。

4

4 に答える 4

3

バインドに「on」を使用するようになったjquery1.7を取得します：http：//blog.jquery.com/2011/09/28/jquery-1-7-beta-1-released/

または、<1.7の場合は、DOMの変更を検索し、変更されたコンテンツのイベントを再適用するため、「bind」ではなく「live」を使用します。そうでない場合は、コールバックにイベントを再適用できます。

DOMの変更後にライブタイプのイベントハンドラーとバインドするための古いAPIから置換。

この$（selector）.live（events、fn）

この$（document）.on（events、selector、fn）になります

またはコードで

これ

$(".container a.chat-reply").live("click", function(){
 // do it live!
});

1.7でこれになります

$(".container").on("click", "a.chat-reply", function(event){
 // do it live!
});

必要なオブジェクトを選択するためのさまざまなオプションがあります。

于 2012-02-14T03:12:34.237 に答える
2

クリックハンドラーで、代わりに.on（）をデリゲートとして使用します

$("div.container").on("click", "a.chat-reply", function(even){
  //click handler here
});

イベントはコンテナまで「バブル」し、a.chat-replayと一致するとトリガーされます。

于 2012-02-14T03:13:09.540 に答える
1

この投稿のおかげで、それほどエレガントではない解決策を決定しました：replaceWith後にイベントが登録されない

クリックイベントを.chat-replyボタンにバインドするwireUpChatReply（）という関数を作成しました。

次に、replaceWith（）の後で、wireUpChatReply（）を呼び出してイベントを再バインドします。document.readyのwireUpChatReplyに対してこれと同じ呼び出しを行います。

きれいではありませんが、機能します。

于 2012-02-14T03:56:29.270 に答える
0

ライブイベントに関する2つの回答では、コンテナ自体が置き換えられ、イベントバインディングがなくなったため、問題は解決しません。

イベントを再バインドする代わりに、この場合、すでにバインドされているイベントを知る必要があります。次のようにすることができます。

$(".container").parent().on("click", ".container a.chat-reply", function(){
  // do something
});

または、複数のコンテナがある場合：

$(document.body).on("click", ".container a.chat-reply", function(){
  // do something
});
于 2018-01-11T13:18:37.577 に答える