javascript - 动态php id JQuery ajax输出不会更改

在新页面上选择一个按钮后，所有信息都在那里，但是每当单击另一个信息时，第一个信息仍然存在并且在刷新页面之前不会更改。

帮我通过这会吗？

纽扣

<?php while($b = mysqli_fetch_assoc($equery)): ?>
                <button  type="button" onclick="modal(<?=$b['id'];?>)" class="w3-btn w3-border" style="width: 260px; display: inline-block; margin: 9px">
                    <img src="">
                    <h3><?php echo $b['product'];?></h3>
                    <h5>Descritopm</h5>
                    <h6></h6>
                </button>
            <?php endwhile;?>

js：

 function modal(id){
                var data = {"id" : id};
                jQuery.ajax({
                    url : <?=BASEURL;?>+'includes/modal.php',
                    method : "post",
                    data : data,
                    success: function(data){
                        jQuery('body').append(data);
                        jQuery('#mod').modal('show');
                    },
                    error: function(){
                        alert("IDK")
                    }
                });
            }

模式：

    <?php
require_once '../core/init.php';
$id = $_POST['id'];
$id =(int)$id;
$sql = "SELECT * FROM aisle WHERE id = '$id'";
$result = $db->query($sql);
$product = mysqli_fetch_assoc($result);

?>

<!-- Modal -->
<?php ob_start();?>
<div id="mod" class="modal fade" role="dialog" tabindex="-1">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3 class="modal-title w3-center"><?=$product['product'];?></h3>
      </div>
      <div class="modal-body">
        <p><?=$product['aisle'];?></p>
        <p>$<?=$product['price'];?></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
<?php echo ob_get_clean();?>

最佳答案

问题在这里

jQuery('body').append(data);

此行将append更多模态，并且许多模态将出现在您的页面上。您应该遵循这种方式。在body标签内创建一个名为contents_from_ajax的div标签，然后使用它。

jQuery('#contents_from_ajax').html(data);

这段代码将删除所有旧的模式，并创建一个新的模式，而不是追加，然后可以正常工作。

希望有帮助

关于javascript - 动态php id JQuery ajax输出不会更改，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45156032/