我有一个结果页面上有多个结果，每个结果的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，但它不起作用。建议我用其他方法来做这件事
我认为你的代码是绑定同一事件多次。它对同一个事件多次推同一个函数。当事件被触发时，所有的push函数都被执行。
简单地你可以取消绑定所有的push函数点击事件和push一个新的。
<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>