I'm using Annotator from http://annotatorjs.org/ to write a qualitative data analysis (QDA) web application. I want to make some calls into its API. These functions take an annotation object as an argument. The annotation is stored using jQuery's $().data() method on the <span> tags that represent the highlighted text of the annotation. You can access it with code like this:
$('.annotator-hl').map(function (_, elem) {
return $(elem).data('annotation');
}).toArray()
The issue I'm having is that when I run this code I get an empty array. No data is retrieved at all. I put some breakpoints into the code to inspect deeper and found that in certain stack frames this code returns the correct data and in other stack frames it returns nothing. This is very strange because I don't know of any relation between using $().data() to store data and some functions where that data would be visible or invisible.
I thought I was crazy but was able to reproduce this observation in multiple functions of Annotator by putting breakpoints in various places. As an example this is the handler for mousing over an annotation: https://github.com/openannotation/annotator/blob/v2.0.0-alpha.3/src/ui/viewer.js#L363
If you put a breakpoint there and move up and down the stack frames, in some frames the data objects are retrievable and in some they are not. I don't see any pattern to it though.
I thought this could be because of the way Webpack compiled the code, but this isn't related because I had the same problem when I wrote the code as a script tag using globals.
So how does this make sense? Why would jQuery data objects associated to elements be visible from certain functions but not from others?