2

JQuery Mobile 1.2.0 バージョンを使用しています。このコンテキストにいくつかのhtmlコードを入れたい:

<div id="div-primeros" data-role="collapsible" data-theme="a" data-content-theme="c" data-collapsed="false">
        <h2>Primeros</h2>
        [I WANT TO ADD CODE DYNAMICALLY HERE] 
</div>

そして、追加したいコードは次のとおりです。

<div class="ui-grid-a">
    <div class="ui-block-a" style="width:93%">
        <ul data-role="listview" style="width:100%">
            <li id="4" data-icon="false">
                <a href="index.html">
                    <img src="some.jpg"></img>
                    <h3>some text</h3>
                    <span class="ui-li-count">some text</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="ui-grid-b" style="width:7%">
        <input cant="1" type="number" value="0" min="0" max="8" style="width:100%">
    </div>
</div>

だから私はこのコードを使ってこれをやろうとしました（「primero」はJSON変数です）：

$("#div-primeros").append(
            "<div id=\"" + i + "\" data-role=\"listview\" class=\"ui-grid-a\">" +
                "<div class=\"ui-block-a\" style=\"width:95%\">" +
                    "<ul style=\"width:100%\">" +
                        "<li id=\"" + primero.id + "\" data-icon=\"false\">" +
                            "<a href=\"menu_detalle.html\">" +
                                "<img src=\"" + primero.thumb + "\"></img>" +
                                "<h3>" + primero.nombre + "</h3>" +
                                "<p>" + primero.descripcion + "</p>" +
                                "<span class=\"ui-li-count\">" + primero.precio + "</span>" +
                            "</a>" + 
                        "</li>" +
                    "</ul>" +
                "</div>" + 
                "<div class=\"ui-grid-b\" style=\"width:5%\">" +
                    "<input cant=\"" + primero.id + "\" type=\"number\" value=\"0\" min=\"0\" max=\"8\" style=\"width:100%\">" +
                "</div>" +
            "</div>");

その結果、コンテンツが正しくフォーマットされず、このコンテンツは折りたたみ可能な「div-primeros」から外れています。

私は何を間違っていますか??? 私は試してみました：

    $("div-primeros").trigger("create");

と

    $("div-primeros").page();

成功した結果はありません。

すべてのコードを更新する方法を知っている人はいますか? どうもありがとう！！！

さよなら

4

1 に答える 1

0

複数の行に分割しないでください。追加する html を囲む二重引用符の代わりに単一引用符を使用してください。そのようです：

$('#div-primeros').append('<div class="ui-grid-a"><div class="ui-block-a" style="width:93%"><ul data-role="listview" style="width:100%"><li id="4" data-icon="false"><a href="index.html"><img src="some.jpg"></img><h3>some text</h3><span class="ui-li-count">some text</span></a></li></ul></div><div class="ui-grid-b" style="width:7%"><input cant="1" type="number" value="0" min="0" max="8" style="width:100%"></div></div>');

これがフィドルです。http://jsfiddle.net/wU6pr/

于 2012-10-17T15:57:11.383 に答える