1

これは、AJAXリクエストの結果を入れているブートストラップモーダルです

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div id="modal-body"></div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
  </div>
</div>

JavaScriptコードは次のようになります

<script type="text/javascript">
  $('#myModal').modal('hide');
  $('div.divBox a').click(function(){
    var vendor = $(this).text();
    console.log(vendor);
    $('#myModal').on('show', function(){          
      $.ajax({
        type: "GET",
        url: "ip.php",
        data: "id=" + vendor,
        success: function(html){
          $("#modal-body").html(html);              
        }
      });           
    });
  });
  $('#myModal').on('hide', function () {
    $("#modal-body").empty();
    <?php unset($_GET); ?>;
  })
</script>

ip.phpファイル は

アンカーリンクのコードは次のようになります

           <tbody>
              <?php foreach ($rowarr as $k => $v) { ?>
                <tr>
                  <td><?php echo $k ?></td>
                  <td>
                    <div class="divBox">
                      <a data-toggle="modal" href="#myModal"><?php echo $v; ?></a>
                    </div>
                  </td>
                </tr>
              <?php } ?>
            </tbody>

$k は数値です。$v は、スペースと特殊文字を含む名前です。

console.log(vendor) には、CDT でクリックしたリンクのテキストが表示されます。しかし、モーダルの出力は変わります。以前にクリックしたすべてのリンク テキストを調べ、それらを置き換え続け、最終的に最新のリンク テキストに到達します。

したがって、この順序でリンクをクリックすると、コンソール出力は次のようになります

Microsoft Corporation
IBM Corp
Hewlett-Packard
Apple

モーダルのテキストは次のように始まります

Array ( [id] => Microsoft Corporation )

次に置き換えます

Array ( [id] => IBM Corp )

次に置き換えます

Array ( [id] => Hewlett-Packard)

その後、

Array ( [id] => Apple )

ページでクリックされたリンクを追跡しているのは何ですか? 新しいリンクがクリックされるたびにリセットする必要がありますか?

編集：「何を試しましたか？」への対応

$("#modal-body").empty();私がクリアする必要があるのはおそらくモーダルボディであることを期待して、そこにを追加しました。そうではありませんでした。次に、モーダルを閉じるときに GET 変数をリセットする必要があるのではないかと考えたので、<?php unset($_GET); ?>;. しかし、print_r($_GET) は、以前にクリックされたすべてのリンクではなく、配列に 1 つの配列要素のみが含まれていることを示しています。そのため、クリックされたリンクの履歴がどこに保存されているかわかりません。

4

1 に答える 1

1

したがって、基本的に、リンクをクリックするたびに、 「show」イベントdivBoxに新しいハンドラーが追加されます。myModalしたがって、基本的に5つの異なるdivBoxリンクをクリックした後、myModalのshowイベントは5つの異なるハンドラー関数を循環します。

基本的に、新しいハンドラーを追加する前に、以前に追加した「show」ハンドラーを削除する必要があります。

$('#myModal').off('show');

jQueryでイベントハンドラーを削除する最良の方法は？

于 2012-08-10T20:49:23.047 に答える