parvez parvez - 3 months ago 16
jQuery Question

php - invoking multiple ajax call on link click

I have a result page on which multiple results are present,structure of each result's div is like :

<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 call

<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>


whole code is working fine except it sends multiple numbers of ajax calls as i can see in console,suppose if 10 results are present then 10 times click got printed on console.i know there is problem with the preview class,but i already tried invoking ajax using id but it is not working.suggest ne some other method to do it successfully

Answer

I think your code is binding same event multiple times. so it pushing same function for same event multiple time. When event is triggered so all pushed functions are executed.

Simply you can unbind all pushed function for click event and push new one.

<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>