CODEWITHSUNDEEP
javascriptjquery
AabinGunz
AabinGunz

Reputation: 12347

How can I get to know which anchor tag got clicked?

I am creating my content dynamically, When a anchor tag is clicked navigate() function is called. How can i determine which anchor tag was clicked?

    function navigate()
    {
        //var location=$(this).attr("id");
        switch(location)
        {
            /*case "Configuration":     $('#detailTable').empty();
                                    $('#detailTable').append(navigateConfig);
            break;*/

            default: alert(location+" a tag was clicked");
        }
    }

    $('#detailTable').empty();
    $('<div width="100%">')
    .attr('id','javainfoSpan')
    .html('<div class="titleBlue"><a href="javascript:navigate();">Configuration</a>&gt;'+productname+'&gt;Java Properties</div>'+
            //some other stuff
        '</div>')       
    .appendTo('#detailTable');

Update:

My question is simple

  1. there will be a number of a elements inside detailTable.
  2. how can I get to know in some js function, which a element was clicked?

Upvotes: 0

Views: 2899

Answers (4)

Thomas Clayson
Thomas Clayson

Reputation: 29925

I see what you're doing now, you're creating the a elements on the fly. If you call javascript:navigate() then you're using standard javascript, and not jquery (jquery is required to use the $(this) selector).

Instead you should have this:

$("body").on('click', 'a', function() {
  var location = $(this).attr('id');
  switch(location){ /* ... */ }
});

This will catch the click event in jquery for any a element that you either create on the fly or that's already there when the page loads.

Remember, if you're using id then you need to set the id attr on the a element.

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337560

Try this:

function navigate($element) {
    //var location = $element.attr("id");   
    switch (location) {
        /*case "Configuration":     $('#detailTable').empty();
            $('#detailTable').append(navigateConfig);
            break;*/

        default: alert(location+" a tag was clicked");
    }
}

$('#detailTable').empty();
$('<div width="100%">')
    .attr('id','javainfoSpan')
    .html('<div class="titleBlue"><a href="#">Configuration</a>&gt;'+productname+'&gt;Java Properties</div>'+
        //some other stuff
        '</div>')       
    .appendTo('#detailTable');

// Pre jQuery 1.7...
$(".titleBlue").delegate("A", "click", function() {
    navigate($(this));
}

// jQuery 1.7...
$(".titleBlue A").on("click", function() {
    navigate($(this));
}

I changed the handler to use the delegate() method of jQuery (or the on() method for jQ 1.7+). Using this it makes it easier to pass the element which caused the event to your processing function, which it does as the $element variable.

You can then do with this as you need.

Upvotes: 1

JMax
JMax

Reputation: 26591

Here is a way to handle this too:

$(document).ready(function() {
    var productname = "mytest";
    $('#detailTable').empty();
    $('<div width="100%">').attr('id', 'javainfoSpan').html('<div class="titleBlue"><a href="#" id="'+productname+'" class="navigate">Configuration</a>&gt;' + productname + '&gt;Java Properties</div>' + '<table id="list1" width="100%"></table>' + '<div id="gridpager"></div>' + '</div>').appendTo('#detailTable');

    $(".navigate").click(function() {
        var location = $(this).attr("id");
        switch (location) {
        case "Configuration":
            $('#detailTable').empty();
            $('#detailTable').append(navigateConfig);
            break;
        case "mytest":
            alert("My test was clicked");
            break;
        default:
            alert(location + " a tag was clicked");
        }
    });
});

See it live on jsfiddle

Upvotes: 1

Murtaza Khursheed Hussain
Murtaza Khursheed Hussain

Reputation: 15336

you have to iterate through each element of using jquery "each" function. By "this" you can get the click object.

Upvotes: 0

Related Questions