.on click event not firing inside Gmaps Infowindow with Fusion Tables info

Question

Using Fusion Tables and GMaps(v3) with Jquery(v1.7.1).

Gmaps displays a layer using Fusion Tables data. The InfoWindow is populated using Fusion Tables information (configured in the Google Docs -> Fusion Table -> Configure Info Window interface).

At the bottom of the custom HTML of the FT Info Window is a link that reads:

<div><a class="detail" href=#><b>Click to see more detail</b></a>
</div>

I have JQuery testing to see if it is clicked and then executing code.

$('.detail').on('click', function(){
    console.log('Click worked');
});

The JQuery code is inside the initialize function that runs on body "onload". I was using the .live jquery handler but that has been deprecated and was giving me problems anyways. The .on handler isn't firing though.

Any suggestions?

Answer 1

The way you're currently using on, only anchors that exist when the page is rendered will be wired up with this click handler; dynamically added anchors will not be picked up like they were with live.

You'll need to do something like this:

$(document).on('click', '.detail', function(){
    console.log('Click worked');
});

Now all clicks that happen anywhere in the document will be observed, and any coming from an element with the class detail will cause the function to fire.

But this is wasteful. Hopefully there's some sort of container that you know will always contain these anchors. If there is, you could do:

$("#someDivId").on('click', '.detail', function(){
    console.log('Click worked');
});

Now only clicks happening from inside the element with the id someDivId will be observed.