jQuery getting ID of clicked link

Question

I have a modal box in jQuery which I have created to display some embed code. I want the script to take the id of the link that is clicked but I can't seem to get this working.

Does anyone know how I can do that or why this may be happening?

My jQuery code is:

function generateCode() {
    var answerid = $('.openembed').attr('id');
    if($('#embed input[name="comments"]:checked').length > 0 == true) {
        var comments = "&comments=1";
    } else {
        var comments = "";
    }
    $("#embedcode").html('<code>&lt;iframe src="embed.php?answerid=' + answerid + comments + '" width="550" height="' + $('#embed input[name="size"]').val() + '" frameborder="0"&gt;&lt;/iframe&gt;</code>');
}

$(document).ready(function () {
    $('.openembed').click(function () {
        generateCode();
        var answerid = $('.openembed').attr('id');
        $('#box').show();
        return false;
    });
    $('#embed').click(function (e) {
        e.stopPropagation()
    });
    $(document).click(function () {
        $('#box').hide()
    });
});

My mark-up is:

<a href="#" id="7830" class="openembed">Embed</a>
<a href="#" id="9999" class="openembed">Embed</a>

in the document.ready() change this line: `var answerid = $('.openembed').attr('id');` to `var answerid = $(this).attr('id');`, should work then. — Henrik Andersson, Dec 10 '12 at 21:53

freedev · Accepted Answer · 2012-12-10T22:22:13.483

Your problem is here:

$('.openembed')

returns an array of matched elements. Your should instead select only the clicked element. $('.openembed') works correctly if you assing a click event to all elements that have this class. But on the other hand, you're unable do know which is clicked.

But fortunately in the body of handler function click you could call $(this).

$(this) will return the current (and clicked element).

// var answerid = $('.openembed').attr('id'); // Wrong
var answerid = $(this).attr('id');   // Correct
// Now you can call generateCode
generateCode(answerid);

Another error is the body of generateCode function. Here you should pass the id of selected element. This is the correct implementation.

function generateCode(answerid) {
    if($('#embed input[name="comments"]:checked').length > 0 == true) {
        var comments = "&comments=1";
    } else {
         var comments = "";
    }
    $("#embedcode").html('<iframe src="embed.php?answerid=' + answerid + comments + '" width="550" height="' + $('#embed input[name="size"]').val() + '"frameborder="0"></iframe>');
}

Here I have implemented your code with the correct behavior: http://jsfiddle.net/pSZZF/2/

In the body of function handler for the click event you should remove `$('.openembed').attr('id');` and use `$(this).attr('id');` — freedev, Dec 10 '12 at 22:06
You should move `generateCode` after `var answerid = $(this).attr('id');` — freedev, Dec 10 '12 at 22:17
Sorry, but I'm not sure to understand what's your problem now. — freedev, Dec 10 '12 at 22:40

score 5 · Answer 2 · answered Dec 10 '12 at 21:54

5

Instead of referencing the class, which will grab all members of that class, you need to reference $(this) so you can get that unique link when it is clicked.

var answerid = $(this).prop('id');

answered Dec 10 '12 at 21:54

dsgriffin

66,495
17
137
137

score 4 · Answer 3 · answered Dec 10 '12 at 21:53

4

 $('.openembed').click(function () {
    generateCode();
    var answerid = $(this).attr('id');
    $('#box').show();
    return false;
});

Use $(this). $('.openembed') refers to multiple links.

answered Dec 10 '12 at 21:53

apscience

7,033
11
55
89

Heads up for adding a short explanation – T. Junghans Dec 10 '12 at 21:55

score 0 · Answer 4 · answered Dec 10 '12 at 21:53

0

var answerid = $('.openembed').attr('id');

needs to be

var answerid = $(this).prop('id');

answered Dec 10 '12 at 21:53

epascarello

204,599
20
195
236

jmm · Answer 5 · 2012-12-10T22:10:55.740

0

Get the id when the correct anchor is clicked and pass it into your generateCode function

$('.openembed').click(function () {
    var answerid = $(this).attr('id');
    generateCode(answerid)

    $('#box').show();
    return false;
});

Change your function

function generateCode(answerid) {
  // dont need this line anymore
  // var answerid = $('.openembed').attr('id');

edited Dec 10 '12 at 22:10

answered Dec 10 '12 at 22:04

jmm

980
1
7
12

score 0 · Answer 6 · answered Dec 10 '12 at 22:09

The other answers are trying to fix the click() function, but your issue is actually with the generateCode function.

You need to pass the clicked element to the generateCode function:

$('.openembed').click(function () {
    generateCode(this);

And modify generateCode:

function generateCode(element) {
    var answerid = element.id;

Of course var answerid = $('.openembed').attr('id'); within the click code isn't correct either, but it doesn't seem to do anything anyway.

jQuery getting ID of clicked link

6 Answers6

Linked

Related