Search code examples
javascriptjqueryhtmlbackbone.js

Jquery tooltip not working on text/template

I cant get javascript tooltip to work on dynamic output, I am using backbone to populate my divsCells

<script class="bookTemplate" type="text/template">
<div class="divRow">
    <div class="divCell <%= Slot.StyleClass %>"><a class="tool" data-tip-type="text" data-tip-source="<%= Slot.TooltipText %>" href="#"><%= Slot.ValueText %></a></div>
</div>
</script>

This outputs the html exactly as expected, but the tooltip wont work on it, If I hardcode the html Cell, the tooltip works.

I call the javascript tooltip file in footer of my page (asp/mvc)

  Output from Dynamic:<div class="divCell open"><a class="tool" data-tip-type="text" data-tip-source="Book it!" href="#">Open</a></div>
  Output from Static: <div class="divCell open"><a class="tool" data-tip-type="text" data-tip-source="Book it Now!." href="#">Open</a></div>
  <script type="text/javascript" src="/Assets/js/views/tooltip.js"></script>

I dont understand why the tooltip is not showing on the dynamic? the html is the same, (Im still new to the world of JS) so I tried moving things around, I dont know how to debug this or work around this, if i want the tooltip script to work on the dynamic field do i have to use special methods?

Solution

  • Your Javascript might not take into account the new elements your are creating with backbone.

    You can use a jQuery function called on(), which have the ability to handle events on descendant elements not yet created

    $( "#selector" ).on( "click", function() {
   //do your tooltip call
});

    Either that or your call to tooltip should be done after backbone has finished its inserts.