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

Answer 1

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

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

Answer 2

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');

Answer 3

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/

Answer 4

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

needs to be

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

Answer 5

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');

Answer 6

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.