JQuery click from multiple anchor for ajax call

Question

I have multiple anchor tag generated by php from database like this

<a href="#" id="reply_doc" data-doc_value="1"></a>
<a href="#" id="reply_doc" data-doc_value="2"></a>
<a href="#" id="reply_doc" data-doc_value="3"></a>

Now I got JQuery script

$(document).ready(function(){
  $("#reply_doc").click(function () {
    var a = $(this).data("doc_value");
    if (a != "") {
        $.ajax({
            type: "POST",
            url: "ajax_check/",
            data: "doc_reply=" + a,
            success: function (b) {
                alert(a+' ok. '+b)
            }
        });
    }
 });
});

This is only applying for the first anchor tag. How can I do this for each anchor tag when that particular is clicked only that anchor will be affected and that particular value will be send with ajax.

Any help will be appreciated. thanks in advance.

How on earth can you give same ID to three elements ?? ID means 'unique identification' . Please use class instead. — Riju Mahna
– Riju Mahna, Commented Jan 31, 2013 at 11:24

Anthony Grist · Accepted Answer · 2013-01-31 11:24:31Z

3

The id attribute is an identifier. As the name might suggest, that means it has to be unique so that it can identify a single element. In order to recognise multiple elements, you'll need to use a class instead:

<a href="#" class="reply_doc" data-doc_value="1"></a>
<a href="#" class="reply_doc" data-doc_value="2"></a>
<a href="#" class="reply_doc" data-doc_value="3"></a>

$(".reply_doc").click(...);

answered Jan 31, 2013 at 11:24

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nnnnnn · Accepted Answer · 2013-01-31 11:29:01Z

1

Change the id to a class, and change your selector to ".reply_doc".

Your html is currently invalid because the id attribute should be unique. Although the browser doesn't jump up and down complaining when you break this rule, when you try to select an element by id it only finds the first (or, in some browsers, the last).

If, hypothetically, you have no control over the html structure you could instead select all anchor elements with the data-doc_value attribute:

$("a[data-doc_value]")...

edited Jan 31, 2013 at 11:29

answered Jan 31, 2013 at 11:23

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Comments

Meherzad · Accepted Answer · 2013-01-31 11:26:51Z

0

Elements cannot have same id so bind event on same class .

a href="#" class="option" id="reply_doc" data-doc_value="1"></a>
<a href="#" class="option" id="reply_doc" data-doc_value="2"></a>
<a href="#" id="reply_doc" class="option" data-doc_value="3"></a>

JQuery script

$(document).ready(function(){
  $(".option").click(function () {
    var a = $(this).data("doc_value");
    if (a != "") {
    $.ajax({
        type: "POST",
        url: "ajax_check/",
        data: "doc_reply=" + a,
        success: function (b) {
            alert(a+' ok. '+b)
        }
    });
}
});
});

answered Jan 31, 2013 at 11:26

Meherzad

8,5611 gold badge33 silver badges40 bronze badges

1 Comment

De. Over a year ago

thats a big mistake. I should remember it form now. its working fine with class. thank you all.

Code Spy · Accepted Answer · 2013-01-31 11:49:30Z

0

Edited again DEMO

<a href="#" class="reply_doc" data-doc_value="1">111</a><br>
<a href="#" class="reply_doc" data-doc_value="2">222</a><br>
<a href="#" class="reply_doc" data-doc_value="3">333</a><br>

$(document).ready(function(){
  $(".reply_doc").click(function () {
    var a = $("a.reply_doc").attr("data-doc_value"); //<-- Add this
    if (a != "") {
    $.ajax({
        type: "POST",
        url: "ajax_check/",
        data: "doc_reply=" + a,
        success: function (b) {
            alert(a+' ok. '+b)
        }
    });
  }
 });
});

This way each time "a" will have unique value contained in data-doc_value on click

edited Jan 31, 2013 at 11:49

answered Jan 31, 2013 at 11:29

Code Spy

9,9744 gold badges72 silver badges46 bronze badges

1 Comment

nnnnnn Over a year ago

Did you test this? (Hint: the click handler will only be called for clicks on the first anchor with that id.)

Collectives™ on Stack Overflow

JQuery click from multiple anchor for ajax call

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related