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

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移动可折叠，但浏览器忽略了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增强动态添加的内容：

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

演示

可选地，您可以初始化可折叠：

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