如何为具有相同类ID但要调用的URL不同的给定列表锚标记调用ajax

Question

I'm new to AJAX, and start to make an ajax able script, in which, I have a number of anchor tags with same class id. But with different url to call for each anchor tag. My function runs but, it call all the anchor tag, even i use to click on one anchor tag. But the task is done for only that clicked anchor tag.

My 2nd problem is

when the task completed for one anchor tag and I start to run other ones, it does not complete the task until I refresh the web page again, and click on it. But it shows that success on every anchor tag. Even the work is not done. Hope you understand my problem, Here is my ajax code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$('.submitdelete').click(function() {
$.ajax({
    type:'POST', 
    url: 'http://localhost/w/wp-admin/admin.php?page=rssap-feeds&action=removePosts&post=28', 
    success: function(response) {
     alert("You have made it!");
    }
});
});
</script> 
<a href="#" title="Remove Posts" class="submitdelete">Remove Posts</a>
//this is for below one
<script type="text/javascript">
 $('.submitdelete').click(function() {
$.ajax({
    type:'POST', 
    url: 'http://localhost/w/wp-admin/admin.php?page=rssap-feeds&action=removePosts&post=29', 
    success: function(response) {
     alert("You have made it!");
    }
});
});
</script>
<a href="#" title="Remove Posts" class="submitdelete">Remove Posts</a>

And if some one does not understand this problem, please comment below for more information.

Question is How do I do that correctly?

Answer 1

First of all, the funny thing about class selector is that it selects all elements with the same class. Example:

<a href="#" class="my-selector">Link 1</a>
<a href="#" class="my-selector">Link 2</a>

$('.my-selector').on('click', function() {
    // Code to run when either Link 1 OR Link 2 are clicked
});

So, what's happening in your code, is that you have registered two functions for a single class selector, which causes both functions to be run even if you click only one of both links.

Now, if I'm correct, the only difference between the two functions is the post id. So why not get the post id as a variable and use only one function?

First rewrite your html to this:

<a href="#" data-post-id="28" title="Remove Posts" class="submitdelete">Remove Posts</a>
...
<a href="#" data-post-id="29" title="Remove Posts" class="submitdelete">Remove Posts</a>

Do you see that data-post-id attribute? I can put anything in it, and it will not show, but is linked to the DOM element. So now whenever the link is clicked, I can actually distinguish which link is clicked! Here, try this:

$('.submitdelete').on('click', function(e) {
    e.preventDefault();

    var postID = $(this).data('postId');
    alert('I\'m about to delete the post with id: [' + postID + ']');
});

Check this fiddle for a demo. (just click the links)

So, I guess you already know how to proceed; just use this little snippet and insert the postID variable into your (single!) ajax function. And you can use the $.post() function for your convenience:

var deleteUrl = 'http://localhost/w/wp-admin/admin.php';

$('.submitdelete').click(function(e) {
    e.preventDefault();

    $.post( deleteUrl,
        {
            page: 'rssap-feeds',
            action: 'removePosts',
            post: $(this).data('postId')
        },
        function(response) {
            alert("You have made it!");
        }
    );
});