jQuery Mobile elements not displaying properly

问题

I am using jQuery Mobile to display a table. However when i append a new row using addMore button, the display is off! Why is it so? it is suppose to follow the first row. Ans also, it is displayed in black theme on my browser... but it is suppose to be white as in the fiddle. why?

Here is my fiddle: http://jsfiddle.net/BgxKW/1/

this is the code to add new row

var addmore = '<tr><td style="text-align: center">' + currentIndex + '</td>' +
    '<td class="small">' +
    '<div data-role="fieldcontain" class="ui-hide-label">' +
    '<label for="number_' + currentIndex + '">Response Number</label>' +
    '<input type="text" name="number_' + currentIndex + '" id="number_' + currentIndex + '" value="" placeholder="Response Number"/>' +
    '</div></td><td>' +


    '<div data-role="fieldcontain" class="ui-hide-label">' +
    '<label for="label_' + currentIndex + '">Description</label>' +
    '<input type="text" name="label_' + currentIndex + '" id="label_' + currentIndex + '" value="" placeholder="Description "/>' +
    '</div></td></tr>';

Also, how can i remove the row?

回答1:

You want to do $(".config").trigger("create"); at the final to resolve style problem.

Updated fiddle link is http://jsfiddle.net/BgxKW/7/

$("#addMore").click(function () {
    currentIndex = $(".config tr:last td:first").text()
    if(currentIndex == ""){currentIndex = 0}
    currentIndex = parseInt(currentIndex) + 1
    var addmore = '<tr><td style="text-align: center">' + currentIndex + '</td>' +
        '<td class="small">' +
        '<div data-role="fieldcontain" class="ui-hide-label">' +
        '<label for="number_' + currentIndex + '">Response Number</label>' +
        '<input type="text" name="number_' + currentIndex + '" id="number_' + currentIndex + '" value="" placeholder="Response Number"/>' +
        '</div></td><td>' +


        '<div data-role="fieldcontain" class="ui-hide-label">' +
        '<label for="label_' + currentIndex + '">Description</label>' +
        '<input type="text" name="label_' + currentIndex + '" id="label_' + currentIndex + '" value="" placeholder="Description "/>' +
        '</div></td></tr>';

     ++currentIndex;
    $('#labels .config tr:last').after(addmore);
    $(".config").trigger("create");
});

$("#remove").click(function(){
    $(".config tr:last").remove();
});

Note: I fixed the style problem and remove function.

来源：https://stackoverflow.com/questions/16478759/jquery-mobile-elements-not-displaying-properly