Question

我正在使用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();

没有成功的结果。

任何人都知道如何刷新所有代码？非常感谢你!!!

再见

Answer 1

不要在多行中拆分它，使用单引号代替要追加的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/

在JQuery Mobile中动态添加内容

1 个答案: