Use jQuery with my own document object

Question

I'm making a greasemonkey userscript that is supposed to preload certain data (actually, xkcd comic strips) and display them when link is clicked.

My task mostly consists of retrieving data from DOM fetched by ajax and assigning the values to DOM the user is viewing. This is one particular case I find jQuery incredibly helpful. But jQuery operates on window.document.

I load and parse document like this:

   xhr.onload = function() {
       var doc = document.implementation.createDocument(
         'http://www.w3.org/1999/xhtml',
         'html',
         document.doctype
       );
       doc.documentElement.innerHTML = this.responseText;
   }

And I need to perform jQuery selectors on doc, so that I can retrieve the site data (such as comic title).

Once more, the question: How to perform jQuery selectors on custom document object?

Does $(doc) not work?

Rhumborl
– Rhumborl

2014-12-10 12:58:52 +00:00
Commented Dec 10, 2014 at 12:58 — Rhumborl
– Rhumborl, Commented Dec 10, 2014 at 12:58
use $(doc).find(selector)

Michal Wilkowski
– Michal Wilkowski

2014-12-10 12:59:10 +00:00
Commented Dec 10, 2014 at 12:59 — Michal Wilkowski
– Michal Wilkowski, Commented Dec 10, 2014 at 12:59
$(doc) will do the job

Rui Silva
– Rui Silva

2014-12-10 12:59:20 +00:00
Commented Dec 10, 2014 at 12:59 — Rui Silva
– Rui Silva, Commented Dec 10, 2014 at 12:59

JLRishe · Accepted Answer · 2014-12-10 12:59:35Z

3

You can simply use $(doc) and jQuery's traversal methods:

var $doc = $(doc);

var comicContainer = $doc.find('#comics'); // for example

answered Dec 10, 2014 at 12:59

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michal Paszkiewicz · Accepted Answer · 2014-12-10 13:00:02Z

0

To add, for example, click events to custom loaded items, use this:

$(body).on( 'click', 'YOUR_DYNAMIC_SELECTOR', function(){ DO_ALL_THIS } )

answered Dec 10, 2014 at 13:00

Michal Paszkiewicz

6918 silver badges23 bronze badges

3 Comments

Tomáš Zato Over a year ago

What is the body variable here?

Michal Paszkiewicz Over a year ago

It is just the html body. It doesn't have to be the body, ultimately put in there the selector of an element that contains all of your dynamically loaded html.

Michal Paszkiewicz Over a year ago

The click will fire on click of the item selected in the $(), but will look for YOUR_DYNAMIC_SELECTOR which is relevant to the click

Collectives™ on Stack Overflow

Use jQuery with my own document object

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related