jquery events on json parsed through popcorn

Question

Does anyone know why jquery events don't work with json data parsed through Popcorn.js JSON Parser?

I want to call a function when the link is clicked. And the link in question is in the json file. The file seems to be parsed as expected, and popcorn footnotes appear as expected. I can follow the parsed link but no event is fired.

Here's a piece of code I'm working on:

<script>
$(function() {

     var popcorn = Popcorn("#video");
     popcorn.parseJSON ("data/data.json");

     $("a[href='gohere.html']").click(function() {
           alert("clicked!"); //should display the message, but doesn't         
     });
});
</script>

And the JSON file looks like this:

{
 "data": [
    {
        "footnote": {
            "start":"1",
            "end":"3",
            "target":"footnote-container",
            "text":"<a href='gohere.html'>Go Here</a>"
        }
    },
    {
        "footnote": {
            "start":4,
            "end":7,
            "target":"footnote-container",
            "text":"Another piece of text."
        }
    }
  ]
}

I would really appreciate any help!

Answer 1

Use delegation with .on()

 $('body')on('click','a[href="gohere.html"]',function() {
       alert("clicked!"); //should display the message, but doesn't         
 });

replacing 'body'(Not necessary but more efficient) with the closest ancestor that is static and exists at the time of dom ready. This will bind the event handler to that element - which in turn listens for the event as it bubbles up from the given selector.

Answer 2

Try using jQuery .on() inside a callback function from parseJSON or some other ajax derivative.

$("a[href='gohere.html']").on('click', function() {
       alert("clicked!");        
 });