JQuery mobile not styling user input check item to same as the rest of list

Question

I have finally succeeded in being able to add user input items to a check list. However, when they are added they are not taking on Jquery Mobiles style.

This is a screen shot of what is happening

enter image description here

This is the HTML:

<h3>My items</h3>
<table id="myTable">
  <tr>
    <td>
      <label for="checkbox65">
        <input name="checkbox65" class="checkbox65" type="checkbox" />
          My stuff
      </label>
    </td>
 </tr> 
 <tr>
   <td>
     <fieldset data-role="controlgroup">
       <label for="textinput4">
         Add new item
        <input name="new_item" id="textinput4" placeholder="" value="" type="text" />
       </label>
     </fieldset>
   <button id="add">Add</button>
   /td>
  </tr>
  </table>

This is the script for adding the user input item to the check list:

<script type="text/javascript">
$(document).on('click', '#add', function(e) {
   var $this = $(this);
   var $firstRow = $this.closest('table').find('tr:first');
   var $newRow = $firstRow.clone();

   var input = $newRow.find(':input').remove();
   input.prop('checked', false);
   $newRow.empty().append(input).append('&nbsp;' + $('#textinput4').val());

   $newRow.insertAfter($firstRow);
  });
</script>

I read on a different question that perhaps I could include

$('[type='submit']').button();

in order to style the user input items. However, I am unsure if this is right for me or where I would put this in my script?

Thanks.

score 1 · Answer 1 · edited May 23 '17 at 12:08

1

This should be used:

$('[type="checkbox"]').checkboxradio();

If you want to find out more about this and how dynamically added content can be correctly styled take a look at my blog ARTICLE, there you will find everything about enhancing dynamically added jQuery Mobile content. Or you can find it HERE.

edited May 23 '17 at 12:08

Community

1
1

answered Jan 29 '13 at 12:52

Gajotres

57,309
16
102
130

Thank you. What line should I replace? or should I add it under the "input.prop" line? – Nicola Conee Jan 29 '13 at 12:54
Add it after it is appended. – Gajotres Jan 29 '13 at 12:59
`$newRow.empty().append(input).append(' ' + $('#textinput4').val()); $('[type="checkbox"]').checkboxradio();` doesn't do anything, while `$newRow.empty().append(input).append(' ' + $('[type="checkbox"]').checkboxradio());` results in [object name] being added the list.. – Nicola Conee Jan 29 '13 at 13:05
Do not append $('[type="checkbox"]').checkboxradio(); add it into a new line after $newRow.insertAfter($firstRow); – Gajotres Jan 29 '13 at 13:07
Mm it made a difference however it now looks like this [link](http://imgur.com/fcOL9V4) – Nicola Conee Jan 29 '13 at 13:12
Show me the output of this variable: $newRow – Gajotres Jan 29 '13 at 13:15
Umm this is printed to the console `[tr, prevObject: e.fn.e.init[1], context: button#add.ui-btn-hidden, constructor: function, init: function, selector: ""…]` – Nicola Conee Jan 29 '13 at 13:25
`
new item` – Nicola Conee Jan 29 '13 at 13:33
It should look like this: I agree – Gajotres Jan 29 '13 at 13:35
So this is just a matter of changing the HTML in my form above the add button? Thanks for all your help Gajotres – Nicola Conee Jan 29 '13 at 13:42

score 0 · Answer 2 · edited Feb 12 '17 at 19:56

0

At first sight you code has a jQuery syntax bug, it should look like this:

$('[type="submit"]').button();

edited Feb 12 '17 at 19:56

marc_s

732,580
175
1,330
1,459

answered Jan 29 '13 at 12:55

jbatista

964
2
11
26

JQuery mobile not styling user input check item to same as the rest of list

2 Answers2