如何多次调用具有相同Div的Ajax

Question

I am calling ajax with below code in my index.php file.

<script type="text/javascript">
    $(document).ready(function(){
        $("#counting").click(function(){
            $.ajax({
                type: 'POST',
                url: 'https://example.com/update.php',
                data: {url: '<?=$url?>'},
                success: function(data) {
                   // alert(data);
                    //$("p").text(data);

                }
            });
   });
});
</script>

It's working perfectly, but the issue is I have div called counting multiple times on the page. example

 <div id="counting">
<a href="example.com">example</a>
</div>

 <div id="counting">
<a href="example.com">example</a>
</div>

Issue - Ajax call only works with first div, not below divs. How to make it work with all divs with id counting

Answer 1

Id attributes are supposed to be unique. You're only ever going to get the first div called because once the DOM sees that, it's met it's requirement and doesn't search further. I suggest you give you divs unique ids and then use a class that is the same for all of them.

 <div id="div1" class="counting_class">
<a href="example.com">example</a>
</div>

<div id="div2" class="counting_class">
<a href="example.com">example</a>
</div>

Then your jQuery would look something like this:

$(".counting_class").click(function(){
  var id = $(this).attr('id');
//then call ajax based on the individual ID
}