jquery-ui tag "a" inside tooltip click event

Question

fellows! I'm doing some frontend work using doT.js for generating content and jquery-ui for displaying tooltips.

{{##def.defboardtooltip:
    <div class='tooltip'>
        <!-- some html code -->
        <a id='bdetails' href='#'>Click for details</a></div>
    </div>
#}}

And how it is used:

<div class="participant" title="{{#def.defboardtooltip}}">

I'm trying to add the event to the a element with jquery as such ():

$(document).ready(function () {
    // ...enter code here
    $('#bdetails').click(function (e) {
        // some code
        console.log('fired');   
    });
});

And I never see the "fired". I'm confused.

Answer 1

jQuery Event delegates are your friend here.

Try:

$(function()
{
   $(document).on('click', '#bdetails', function(e)
   {
     var a = $(this);
   });
});

This will filter the event to just your #bdetails element, you can use any valid jQuery seletor here also; e.g., 'a' to delegate all anchor tag clicks.