jQuery Mobile元素无法正确显示 [英] jQuery Mobile elements not displaying properly

问题描述

我正在使用jQuery Mobile来显示表格. 但是，当我使用addMore按钮添加新行时，显示关闭！为什么会这样呢?假设跟随第一行.回答也是如此，它在我的浏览器中显示为黑色主题...但是它应该像小提琴一样是白色的.为什么?

这是我的小提琴: http://jsfiddle.net/BgxKW/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>';

此外，如何删除该行?

解决方案

您最终想做$(".config").trigger("create");来解决样式问题.

更新的小提琴链接为 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();
});

注意:我修复了样式问题并删除了功能.

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?

解决方案

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.

这篇关于jQuery Mobile元素无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！