Question

我有一个json对象，其中包含两个简单的名称：值对和第三对，其值包含html标记：

var sen = {
        train_cost: "900",
        plane_cost: "777",
        collapsible_content: "<div data-role='collapsible'><h3> A heading </h3><p>Stuff and more stuff, with some php variables, like {$this_var} and {$that_var}</p></div>"};

我正在尝试将collapsible_content显示为jquery mobile可折叠，但浏览器忽略了jqm标记（<div data-role='collapsible'>）;正如您在点击“高级”时在fiddle中看到的那样。它识别其他html（<h3>和<p>元素）并显示它们，但我真的希望jqm可折叠。

我尝试使用反斜杠和collapsible_content转义字符串中单引号，这是'的值部分，但这没有效果。

我觉得我错过了一些明显的东西，但这对我来说并不明显。关于如何展示jqm可折叠的任何建议？

这是html：

<form id='myForm'>
    <fieldset data-role='controlgroup' data-type='horizontal'>
        <label for='senior'>Senior</label>
        <input type='radio' name='switch' id='senior' value='sen' checked='checked'>
        <input type='radio' name='switch' id='student' value='stu'>
        <label for='student'>Student</label>
    </fieldset>
</form>
<table id="tab1">
    <tr>
        <th>Mode</th>
        <th>Miles</th>
        <th>Cost</th>
    </tr>
    <tr>
        <td>Train</td>
        <td>3.9</td>
        <td class="view-train"></td>
    </tr>
    <tr>
        <td>Plane</td>
        <td>1000</td>
        <td class="view-plane"></td>
    </tr>
</table>
<div class='collapsible_content'></div>

......这里是js：

$('#myForm input').on('change', function () {
    var sen = {
        train_cost: "900",
        plane_cost: "777",
        collapsible_content: "<div data-role='collapsible'><h3> A heading </h3><p>Stuff and more stuff, with some php variables, like {$this_var} and {$that_var}</p></div>"
    };
    var stu = {
        train_cost: "5000",
        plane_cost: "8000"
    };
    var active = $('input[type="radio"]:checked', '#myForm').val();
    if (active == "sen") {
        $('#tab1 .view-train').text(sen.train_cost);
        $('#tab1 .view-plane').text(sen.plane_cost);
        $('.collapsible_content').html(sen.collapsible_content);
    } else if (active == "stu") {
        $('#tab1 .view-train').text(stu.train_cost);
        $('#tab1 .view-plane').text(stu.plane_cost);
    } else {
        alert('you selected nothing');
    }
});

Answer 1

您必须告诉jQM enhance 动态添加的内容：

$('.collapsible_content').html(sen.collapsible_content).enhanceWithin();

<强> DEMO

您可以选择初始化可折叠：

$('.collapsible_content').html(sen.collapsible_content).find("[data-role='collapsible']").collapsible();

html标记包含在json name-value的值组件中 - 正确的显示方式？

1 个答案: