How do I add JQuery mobile styles to a table row that is created on the fly

Question

I have some code in my JQuery UI/Coldfusion application that allows the user to add a row to a table and delete rows where required. The first row is not created dynamically so the JQuery Mobile styling is applied to this row. How do I add the same styling to the dynamically created additional rows that the user may add?

My code is this:

javascript:

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function () {
var counter = 0;

$("#addrow").on("click", function () {

    counter = $('#myTable tr').length - 2;

    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><select name="urltype' + counter + '" id="urltype' + counter + '" data-native-menu="false"><option>Select a URL type</option><cfoutput query="variables.qryurltype"><option value="#NC_VALUE_ID#">#TC_MED_DESC#</option></cfoutput></select></td>';
    cols += '<td><input type="text" name="url' + counter + '"/></td>';

    cols += '<td><input type="button" class="ibtnDel"  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
});

$("table.order-list").on("click", ".ibtnDel", function (event) {
    $(this).closest("tr").remove();


    counter -= 1
    $('#addrow').attr('disabled', false).prop('value', "Add Row");
});

});


});//]]>  

</script>

and my html is:

  <table id="myTable" class="order-list">
<thead>
    <tr>
        <td>URL Type</td>
        <td>URL</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <select name="select_url_type" id="select_url_type" data-native-menu="false">
                <option>Select a URL type</option>
             <cfoutput query="variables.qryurltype">
                <option value="#NC_VALUE_ID#">#TC_MED_DESC#</option>
             </cfoutput>
            </select>   
        </td>
        <td>
            <input type="text" name="url" />
        </td>
        <td><a class="deleteRow"></a><input type="button" id="addrow" value="Add Row" /></td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td colspan="5" style="text-align: right;">

        </td>
    </tr>
</tfoot>

I am using the following JQuery components:

    <link rel="stylesheet" href="scripts/jquery.mobile-1.4.2.min.css" />
 <script src="scripts/jquery-1.9.0.js"></script>
 <script src="scripts/jquery.mobile-1.4.2.min.js"></script>

Any help would be much appreciated.

regards

JC

Answer 1

You can call enhanceWithin() on the table after adding the rows:

$("table.order-list").append(newRow).enhanceWithin();

DEMO

This assumes you are not using the jQM table widget, but just a plain table with jQM widgets in the table cells.