Popcorn.js and jQuery

Question

Is there a way to target Popcorn.js elements using jQuery. Example: I have this below as a method with a div in the text area. I am adding a close span to attempt to close the parent div if the person does not want to wait the 8 seconds until the element closes. This is in my script.js

example.popupFootnote({ "id": "footnote",
    "start": 2,
    "end": 10,
    "target": "footnotes",
    "title": "Tear Gas",
    "text": '<div id="exampleBox"><span style="float:right; margin-right:10px">Close Window</span><a href="http://en.wikipedia.org/wiki/Tear_gas">Tear gas</a>, formally known as a lachrymatory agent or lachrymator (from lacrima meaning "a tear" in Latin), is a non-lethal chemical compound that stimulates the corneal nerves in the eyes to cause tearing, pain, and even blindness. Common lachrymators include OC, CS, CR, CN, nonivamide, bromoacetone, phenacyl bromide, xylyl bromide and syn-propanethial-S-oxide (from onions). Lacrymators often share the structural element Z=C-C-X, where Z indicates carbon or oxygen, and X indicates bromide or chloride.</div>',
    top: '10%',
    left: '70%'
});`

So I wan't it when the element 'closeWindow' is clicked then the box its parent closes.

this is in my index.html below my script.js in the HTML between script tags.

$(document).ready(function () {

    $('#closeWindow').click(function () {
        $(this).parent().parent().hide();
    });

});

The HTML elements are laid out like this:

<div id="movieHolder">

<div id="video" style="width: 750px; height: 422px;" ></div>

    <div id="overlayDiv"></div>

    <div id="overlayDiv-Map"></div>

    <div id="footnotes"></div>

</div>

Answer 1

You need to use Event Delegation or the new jQuery Live event handler method to do this, here's an example: http://jsfiddle.net/bcmoney/PTJ4w/ (scrub to 25 seconds for the popcorn footnote to popup)

You were pretty close but forgot to actually put:

<span id="closeWindow" style="float:right; margin-right:10px">Close Window</span>

Also, might want to move inline CSS to an external stylesheet or at least the header but I'm sure you know that.

Lastly, the jQuery would be changed to the following:

  $(document).ready(function () {
      $('#closeWindow').live("click", function () {
          $(this).parent().parent().hide();
      });
  });