Question

I have the following code below:

$('<td>').append($('<input>').attr({ type: 'text', readonly: 'readonly', value: currentSet.weight }));

A little bit later, I append that and apply the style with:

.trigger('create');

The code works just fine. I am also, however, trying to make that input appear mini, jquery-mobile style (i.e. as if the <input> had the data-mini="true" attribute attached). I am not able to do this successfully. I have tried the following methods:

$('<td>').append($('<input>').data('data-mini', 'true').attr({ type: 'text', readonly: 'readonly', value: currentSet.weight }));
$('<td>').append($('<input>').attr({ type: 'text', data-mini: 'true', readonly: 'readonly', value: currentSet.weight }));

The two lines above cause none of the javascript in the file to be executed.
I have also tried to do something like the following, where .dynamicRow is a <tr> that contains the <td> I am creating:

$('.dynamicRow').find('<input>').data('data-mini', 'true');

Any ideas?

Answer 1

You shouldn’t prefix with data- when you’re using .data();

Try this;

$('<td>').append($('<input>').data('mini', true).attr({ type: 'text', readonly: 'readonly', value: currentSet.weight }));