0

私は ajax コールバックでいくつかの問題を抱えています。基本的に、このスクリプトは #inbox div を archive.php に置き換えます (通常はメッセージと一致するモーダルが生成されますが、簡単にするために一般的なモーダルを含めました)。

モーダルを閉じると、ajax コールバックがトリガーされます。現在、モーダル ID を返します。ただし、これは 1 回しか機能しません。ここで問題が発生します。問題は jQuery html コマンドにあるようです。これを alert(id) に置き換えたところ、スクリプトは何度でも実行されます。助言がありますか？さらに明確にする必要がある場合はお知らせください。ありがとう。

HTML / JavaScript:

<div id="inbox"> <!-- Content should be put between this div -->
      <?php include_once('archive.php'); ?>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#inbox .modal').on('hidden', function() {
      id = $(this).attr('id');
        $.ajax({
          type: "POST",
          url: "archive.php",
          data: {message_id : id},
          cache: false,
          success: function(data) {
            $('#inbox').html(data); // problem is here
          }
        });
    });
  });
</script>

PHP (archive.php):

<?php echo $_POST['message_id']; // I've also used SQL inserts, which work fine when I'm not using the jQuery HTML command ?>

<!-- Modal 1 -->

<a href="#modalOne" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<div id="modalOne" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…&lt;/p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<!-- Modal 2 -->
<a href="#modalTwo" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<div id="modalTwo" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…&lt;/p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<!-- Modal 3 (etc...) -->
4

2 に答える 2

1

これを実行すると：

$('#inbox .modal').on('hidden', function() {

現在の'#inbox .modal'オブジェクトを見つけて、イベント ハンドラーをそれらにバインドします。

次に行う場合：

$('#inbox').html(data);

これらの DOM オブジェクトが新しいオブジェクトに置き換えられ、それらの新しいオブジェクトに対してアクティブなイベント ハンドラーがなくなります。

それを修正するには、次の 2 つの選択肢があります。

  1. 動的に作成されたオブジェクトで機能する委任イベント処理を使用できます。
  2. HTML を置き換えた後、イベント ハンドラーを再バインドできます。

使用しているイベントについてはわかりませんがhidden、委任されたイベント処理で機能する場合は、これに変更して委任されたイベント処理を使用できます。

$('#inbox').on('hidden', '.modal', function() {

ここでは、イベントは再作成されていないオブジェクトにバインドされ、#inboxバブルアップするイベントをチェックして、それらが.modalオブジェクトで発生したかどうかを確認します。これが、委任されたイベント処理のしくみであり、親オブジェクトにイベント ハンドラーがインストールされた後に動的に作成される子オブジェクトで機能します。

于 2013-04-12T02:50:37.533 に答える
1

イベントを にバインドした$('#inbox .modal')ため、コンテンツを に置き換える$('#inbox').html(data)と、イベントがバインドされている要素も削除 (置き換え) されます。代わりに$('#inbox').on('hidden', '.modal', function() {、イベントをバインドしてみてください。

于 2013-04-12T02:51:17.367 に答える