.innerHTML 打破了 jQuery 移动拆分 ListView 示例的布局

Question

可能更像是一个初学者类型的问题，但是。如果我在页面上使用以下代码，它可以正常工作，并显示我需要的内容（来自 jquery 的 Listview）

<ul data-role="listview"  data-split-theme="a" data-inset="true">
    <li><a href="#">
        <img src="alarmcritical.png" width=25px;>
        <h2>Broken Bells</h2>
        <p>Broken Bells</p></a>
    </li>
<br>
    <li>
        <a href="#">
            <img src="alarmminor.png" width=25px;>
            <h2>Warning</h2>
            <p>Hot Chip</p>
        </a>
    </li>
<br>
    <li>
        <a href="#">
            <img src="alarmmajor.png" width=25px;>
    <h2>Wolfgang Amadeus Phoenix</h2>
    <p>Phoenix</p>
        </a>
    </li>
</ul>

但是，我正在使用

更新页面的一个部分

document.getElementById('insertHere').innerHTML = stringData;

stringData 是上面 html 的一长行...我已将其复制粘贴为一行以确保它确实有效（在 innerhtml 之外）。

所以我有一个插入的跨度，并希望能产生与我自己键入 html 相同的效果。但每次它出来时都坏了（没有格式化为 listview ）。这是一个常见问题，还是我忽略了什么？

谢谢

编辑：使用 Javascript 更新 - 温和一点，对它比较陌生，并使用大量示例源代码

$(document).ready(function () {


$('#tags').on('autocompleteselect', function (e, ui) {

   //check array for company name that was entered
    for(var i = 0; i < cases.length;i++){
    if(ui.item.value == cases[i].companyName)
    index = cases[i].id;
    }
    var company = "";

    //set the company name to match the one the customer selected
    company = cases[index].companyName;

    //display on page the cases for the customer selected

    var stringData = '<ul data-role="listview"  data-split-theme="a" data-inset="true"><li><a     href="#">    <img src="alarmcritical.png" width=25px;>    <h2>Broken Bells</h2>    <p>Broken Bells</p></a></li><br><li><a href="#">    <img src="alarmminor.png" width=25px;>    <h2>Warning</h2>    <p>Hot Chip</p></a></li><br><li><a href="#">    <img src="alarmmajor.png" width=25px;>    <h2>Wolfgang Amadeus Phoenix</h2>    <p>Phoenix</p></a></li>';

    document.getElementById('insertHere').innerHTML = stringData;

    //hide keyboard after user is done selecting
    //source code found at http://stackoverflow.com/questions/8335834/how-can-i-hide-the-android-keyboard-using-javascript
    hideKeyboard($('input'));
      function hideKeyboard(element) {
            element.attr('readonly', 'readonly'); // Force keyboard to hide on input field.
            element.attr('disabled', 'true'); // Force keyboard to hide on textarea field.
            setTimeout(function() {
                element.blur();  //actually close the keyboard
                // Remove readonly attribute after keyboard is hidden.
                element.removeAttr('readonly');
                element.removeAttr('disabled');
                }, 100);
        }


    $(function() {
        $( "#selectable" ).selectable({
        stop: function() {
    var result = $( "#select-result" ).empty();
    $( ".ui-selected", this ).each(function() {
      var index = $( "#selectable li" ).index( this );
      result.append( " #" + ( index + 1 ) );


      //set a brief timeout between the actual click of the case and when it displays
      setTimeout(func, 500);
      //display the case details
        function func() {
        document.getElementById('insertHere').innerHTML = '<div class="shadow"><table  id=\"selectable\" border:0.5px BORDERCOLOR=black><tr><td height=10%><h2>' + company + '</h2></td></tr><table  id=\"selectable\" border:0.5px BORDERCOLOR=black><tr><td><img src=ic_priority.png>Priority Status</td>&nbsp;&nbsp;<td><img src=ic_escalation.png>Escalation</td></tr></table><br><table id=\"selectable\" border:0.5px BORDERCOLOR=black><tr><td><img src=\"ic_agent.png\" valign=bottom>&nbsp<button data-theme="a"><img src=ic_action_call.png></button><button><img src=\"ic_action_chat.png\"></button</td></tr><tr><td>Case: ' + customerCases[index].caseNumber + ' </td></tr><tr><td>Status: Open</td></tr><tr><td>Updated: 8 May 2014 15:09:46</td></tr><tr><td>Contact: Bob Kingston</td></tr><td>Agent: ' + customerCases[index].contactName + '</td><tr><td>State: Offline</td></tr><tr><td><br></td></tr><tr><td>Issue:</td></tr><tr><td>&nbsp;&nbsp;&nbsp;' + customerCases[index].problem  + '</td></tr></table></div>';
        }
        });
      }
    });
  });

});

});

$("input[name=companyName]").autocomplete({ 来源：案例 }).data("自动完成")._renderItem = function(ul, item) { 返回 $("

").data("item.autocomplete", item).append("" + item.url + "").appendTo(ul); };

//$('div').addClass('shadow');

</script>

以上所有内容都在脑海中。 我正在做的是让自动完成功能从本地数组中调出一些信息。因此，当您第一次搜索时，它会显示一些内容，然后在您选择一个内容后，它会显示一个包含所选信息的页面。全部进入“插入”。但是当我将 innerHTML 与我编写的 stringData 一起使用时，我似乎无法让它正常工作。

Answer 1

我的导入中有 jquery ui 和 jquery mobile，它们似乎不能很好地配合使用，因为当我取出 jquery ui css 时，我可以用 .innerHTML 显示它。

我必须使用 jquery 移动自动完成功能，因为我使用的那个需要 ui。

Answer 2

您在页面渲染后操作 DOM 并且在您操作之前应用了列表视图。在使用 javascript 操作列表视图后，您需要将列表视图重新应用到列表中。这是一个简单的jsFiddle 显示该过程。如果您附加项目（或插入或前置），您只需执行 .listview("refresh") 即可，因为列表视图已经呈现。只有当您替换整​​个ul 或ol（绑定了列表视图）时，您才需要重新申请。替换整个 ul 正是您在示例中所做的。

$(document).ready(function () {
    var stringData = '<ul id="listToShow" data-role="listview"  data-split-theme="a" data-inset="true"><li><a     href="#">    <img src="alarmcritical.png" width=25px;>    <h2>Broken Bells</h2>    <p>Broken Bells</p></a></li><br><li><a href="#">    <img src="alarmminor.png" width=25px;>    <h2>Warning</h2>    <p>Hot Chip</p></a></li><br><li><a href="#">    <img src="alarmmajor.png" width=25px;>    <h2>Wolfgang Amadeus Phoenix</h2>    <p>Phoenix</p></a></li>';

    $('#insertHere').html(stringData);

    $('#listToShow').listview();
});

注意：我在ul 中添加了一个id，以便我们在重新应用listview 时可以引用它。