Question

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?

Answer 1

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.