Apply Button() to an element inside a variable

Question

If have a variable data = '<div>... <button id="remember"> ... </button> ...</div>', is it possible to apply the .button(); method to a button inside that variable?

I've tried the following:

$('#remember', data).button();

but that doesn't work. After that i just do $(data).dialog();, which works.

I've come with a workaround and that's to append the variable data to the document, call the .button() and then call the .dialog(), but appending and removing dialog's divs on the document doesn't seems right.

Answer 1

You can do it using .find(selector) and .end() like this

var data = '<div>... <button id="remember"> ... </button> ...</div>';
​$(data).find("#remember").button().end().dialog();​​​​

You can see a quick demo here

For a breakdown of how this works:

1. $(data) - Creates a document fragment out of your string
2. .find("#remember") - Locates the <button> inside
3. .button() - Creates the jQuery UI button effect on that element
4. .end() - Returns the previous set selector, effectively $(data)
5. .dialog() - Creates a dialog on the whole data element, since that's where .end() puts the chain.

Answer 2

No, there is no "button" inside that variable, just a string of characters. You will have to add the button to the DOB (e.g. by using append(), as you're already doing), before you can apply a method to that element.

Edit: Apparently not! See comment below.