0

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.

Ronar
  • 7
  • 3

1 Answers1

0

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.

click2install
  • 980
  • 9
  • 23
  • works like a charm! Thanks. I think I got it. Event was fired not on anchor but on document. – Ronar Mar 22 '15 at 09:22
  • When using delegation, the event is `bound` at the parent level, in this case `document` and filtered to the element you provide. This is the required approach when elements are dynamically added to the page, as they cannot be bound until they are added, so we bind the top level `once` and let the dynamic elements filter to the initial binding - and you don't have to worry about binding and cleaning up multiple elements when they are dynamically added - as you only ever bind/unbind once at the parent level. – click2install Mar 22 '15 at 09:25