Question

我有一个结果页面，其中存在多个结果，每个结果的div的结构如下：

 <div class="col-md-3 photo-grid " style="float:left">
<div class="well well-sm"  target="_blank">
    <figure>
        <img class="img" alt="PDF" src="<?php echo $icon_url ;?>" >
        <figcaption id="hide"> <p> <a href="#" class="preview" data-id = "<?php echo $content_id;?>"><strong>Preview</strong></a></p>
        </figcaption>
    </figure>
    <a href="final.php?id=<?php echo $id;?>&name=<?php echo $title;?>" target="_blank">
        <h4><small><?php echo $title; ?></small></h4>
    </a>
    <br>
    <ul style="list-style: none;" class="container-fluid">
        <li class="col-md-4 col-xs-4 pull-left">
        <a href="#" class="preview btn btn-default"  id="btnFilter" data-id = "<?php echo $content_id;?>">Preview</a></li>

        <li name="id" class="col-md-6 col-xs-6"><a href="final.php?id=<?php echo $content_id;?>&name=<?php echo $title;?>" class="btn btn-primary" id="btnFilter" target="_blank">  View Full Doc</a></li>
        <li class="col-md-2 col-xs-2"><i class="fa fa-eye" aria-hidden="true" style="margin-top:10px;"> <?php echo $doc_views;?></i></li>
      </ul>
   </div>
  </div>
  <?php include 'modal.php'; ?>

ajax电话

  <script>
 $('.preview').on('click', function() {
 console.log('click');
 var content_id = $(this).data();
 console.log(content_id);
 $.get('ajax/remote_modal.php', { content_id: content_id }, function(data) {
  // Populate modal
  //console.log(data);
 $("#modal_data").html(data);
 $("#myModal").modal('show');
});
});
</script>

整个代码工作正常，除了它发送多个ajax调用，我可以在控制台中看到，假设是否存在10个结果然后在控制台上打印10次点击。我知道预览类有问题，但是我已经尝试使用id调用ajax，但它没有work.suggest ne其他一些方法来成功完成

Answer 1

我认为您的代码多次绑定同一事件。所以它多次推动同一事件的相同功能。触发事件时，执行所有推送的功能。

只需取消绑定点击事件的所有推送功能并推送新功能。

<script>

    $(document).ready(function(){
        $('.preview').unbind('click').bind('click', function(e) {
            e.preventDefault();
            console.log('click');
            var content_id = $(this).data();
            console.log(content_id);
            $.get('ajax/remote_modal.php', { content_id: content_id }, function(data) {
                // Populate modal
                //console.log(data);
                $("#modal_data").html(data);
                $("#myModal").modal('show');
            });
            return false;
        });
    })
</script>

php - 在链接点击时调用多个ajax调用

1 个答案: