Question

所以这是我的问题：我做了一个有6列的网格（5是最大值，我必须做3x2网格）。

<div class="ui-grid-a" id="currentgrid" style="height: 38px">
    <div class="ui-block-a">
        <div class="ui-grid-b">
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-e">Info1</div>
            </div>
            <div class="ui-block-b">
                <div class="ui-bar ui-bar-e">Info2</div>
            </div>
            <div class="ui-block-c">
                <div class="ui-bar ui-bar-e">Info3</div>
            </div>
        </div>
    </div>
    <div class="ui-block-b">
        <div class="ui-grid-b">
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-e">Info4</div>
            </div>
            <div class="ui-block-b">
                <div class="ui-bar ui-bar-e">Info5</div>
            </div>
            <div class="ui-block-c">
                <div class="ui-bar ui-bar-e">Info6</div>
            </div>
        </div>
    </div>
</div>

<p></p>

标题显示正确，整个屏幕的宽度均匀分割6个标题。但这是我不明白的事情。我尝试使用带有js函数的按钮append()相同的代码部分，但输出效果不佳。这是我使用的js行：

$("p").append('<div class=ui-grid-a" id="currentgrid" style="height: 38px"><div class="ui-block-a"><div class="ui-grid-b"><div class="ui-block-a"><div class="ui-bar ui-bar-e">IP</div></div><div class="ui-block-b"><div class="ui-bar ui-bar-e">TargetHardware</div></div><div class="ui-block-c"><div class="ui-bar ui-bar-e">Position</div></div></div></div><div class="ui-block-b"><div class="ui-grid-b"><div class="ui-block-a"><div class="ui-bar ui-bar-e">Type</div></div><div class="ui-block-b"><div class="ui-bar ui-bar-e">LiteralName</div></div><div class="ui-block-c"><div class="ui-bar ui-bar-e">ManufacturerCode</div></div></div></div></div>');

然后输出全部向左拉伸。现在，6列大约占屏幕宽度的1/3。有没有人有关于可能出现什么问题的线索？

Answer 1

jQuery Mobile要求您明确create or refresh elements if they are dynamically created。更改第二个网格的ID（ID值必须唯一）并添加以下行：

$('#secondgrid').grid('create');

另请参阅下面的工作示例，该示例也在JSFiddle上：http://jsfiddle.net/d23m5yv3/。

$("p").append('<div class=ui-grid-a" id="secondgrid" style="height: 38px"><div class="ui-block-a"><div class="ui-grid-b"><div class="ui-block-a"><div class="ui-bar ui-bar-e">IP</div></div><div class="ui-block-b"><div class="ui-bar ui-bar-e">TargetHardware</div></div><div class="ui-block-c"><div class="ui-bar ui-bar-e">Position</div></div></div></div><div class="ui-block-b"><div class="ui-grid-b"><div class="ui-block-a"><div class="ui-bar ui-bar-e">Type</div></div><div class="ui-block-b"><div class="ui-bar ui-bar-e">LiteralName</div></div><div class="ui-block-c"><div class="ui-bar ui-bar-e">ManufacturerCode</div></div></div></div></div>');
$('#secondgrid').grid('create');

<div class="ui-grid-a" id="currentgrid" style="height: 38px">
    <div class="ui-block-a">
        <div class="ui-grid-b">
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-e">Info1</div>
            </div>
            <div class="ui-block-b">
                <div class="ui-bar ui-bar-e">Info2</div>
            </div>
            <div class="ui-block-c">
                <div class="ui-bar ui-bar-e">Info3</div>
            </div>
        </div>
    </div>
    <div class="ui-block-b">
        <div class="ui-grid-b">
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-e">Info4</div>
            </div>
            <div class="ui-block-b">
                <div class="ui-bar ui-bar-e">Info5</div>
            </div>
            <div class="ui-block-c">
                <div class="ui-bar ui-bar-e">Info6</div>
            </div>
        </div>
    </div>
</div>

<p></p>

Jquery移动附加网格将无法正确输出

1 个答案: