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之外）。

所以我有一个inserthere的范围，并且希望产生相同的效果，就好像我只输入了html一样。但每次它出现故障（没有格式化为列表视图）。这是一个常见的问题，还是我忽略了什么？

由于

编辑：使用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>';
        }
        });
      }
    });
  });

});

}）;

$（ “输入[名称=的companyName]”）。自动完成（{ 来源：案例 }）。data（“autocomplete”）._ renderItem = function（ul，item）{ return $（“

”）。data（“item.autocomplete”，item）.append（“”+ item.url +“”）。appendTo（ul）; };

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

</script>

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

Answer 1

您在渲染页面后操作DOM并在操作之前应用了listview。在使用javascript操作列表视图后，您需要将列表视图重新应用到列表中。这是一个显示该过程的简单jsFiddle。如果您追加项目（或插入或前置），您可以只执行.listview（＆＃34;刷新＆＃34;），因为列表视图已经呈现。只有当您替换整个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时引用它。

Answer 2

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

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

.innerHTML打破了jQuery移动分割ListView样本的布局

2 个答案: