Question

I’ve got a document.ready function that stores all of the data in preparation for a popover on :hover.

domReady( function() {
  $('.foo').each( function() {
    var el = $(this);
    var el_content = el.find('[data-content]');
    el.data( 'content-attr', { content: el_content, classes: el_classes } );
  } );
} );

Everything works fine by default, but when the URL is appended for AJAX sorting, I lose my window ref I suppose, because the following event handler returns undefined when accessing the data which is accessed without issue when the URL is not appended. I’m aware that this must be a window reference issue in the event handler, can someone point me to the correct way to reference window so that that the jQuery object where data is stored on load is accessible to .on( 'hover', function() { //do stuff }); while the URL is appended for AJAX?

$( window ).on( 'hover', '[rel="popover"]', function() {
    var el = $(this);
    var this_content_data = el.data( 'content-attr' ).content;
    function() {
      // do stuff
    }
} );

Answer 1

In the case of this particular issue, I realized the only way to do this was to store the data in a jQuery .data attribute on the initialization of the view for access by the function on $(window).element.on( 'hover', ...){}.