Using jQuery to send events to google analytics, I am getting some strange results.
Works for this button as expected:
jQuery('button.navigation-back-button').on('click', function(event) { console.log("button.navigation-back-button"); });
But exactly the same doesn't work for any other button I have tried:
jQuery('button.resources-drawer').on('click', function(event) { console.log("button.resources-drawer"); });
Any idea what is going on there?
Thanks
Well, in the 'out of the box' build of Adapt, the selector button.resources-drawer doesn't match any element. This is because an element like that only gets added when the Adapt 'drawer' contains multiple items.
If I install another drawer-based extension such as Glossary, the code works fine if I execute it when the 'drawer' is open (because the only time the element it's targetting exists is when the drawer is open).
Thanks Matt,
I do have Glossary in the drawer as well, but that was an example - the console log isn't triggered for any button other than the back button - here are the ones I have in code at the moment:
'button.navigation-back-button' - only this one works.
'button.resources-drawer'
'button.glossary-drawer'
'button.media-inline-transcript-button'
'button.hotgraphic-graphic-pin'
'button.page-level-progress-navigation'
All are in the same document ready function as the back button, no errors in console or adapt logs.
It's perhaps the same problem though - it all depends on when you try to start listening to those elements' click events since, apart from navigation-back-button, none of them exist in the DOM all the time.
In some cases you should be able to do something like this instead:
$('body').on('click', '.hotgraphic-graphic-pin', function(e) {
console.log("hot graphic pin clicked");
});but for some reason I couldn't get this to work with .resources-drawer - I couldn't figure out exactly why, all I managed was to determine that it's something to do with these lines in that if I comment them out it then started working.