Apply jquery to a code inserted with javascript

Question

I have this line of code which is inserted via JS when the localDB is ready.

    //
    boxOne = document.getElementById("box1");
    content = '<button data-icon="delete">Delete</button>';
    boxOne.innerHTML = content;
    //

The problem with this code is that mobilejquery should read data-icon="delete" and add the class's for the icon to appear but its not doing that. I can simply add the class's manually by my self but this is also causing me trouble when I am trying to apply a validation library to a form that is inserted by JS the validation wont work. So how can I make jquery & any library that I use Reads this inserted JS code.

Answer 1

The other answers show you how to add the button, but not how to get jQuery Mobile to enhance it.

If you are using jQM 1.4, call enhanceWithin() on the container:

var content = '<button data-icon="delete">Delete</button>';
$("#box1").append(content).enhanceWithin();

If you are using 1.3, call button() on the button object:

var content = '<button data-icon="delete">Delete</button>';
$("#box1").append(content);
$("#box1 button").button();

NOTE: in my example I use append() to add the content, you can still use html() if you prefer.

Answer 2

I think you mean to put content inside boxOne. As it stands your trying to insert a DOM object (itself) into the innerHTML:

boxOne.innerHTML = content;

JSFiddle

Or, since it's available to you, just use jQuery:

$btn = $('<button/>',{text:'Delete','data-icon':'delete'});
$('#box1').html($btn);

JSFiddle

Answer 3

With jQuery, you can use html():

$('#box1').html('<button data-icon="delete">Delete</button>');