Question

因此，我想在选择框中选择一个项目，然后单击一个按钮，将所选项目值和ID 添加到列表视图下面。问题是，我似乎没有让它看起来像listview。新项目显示在列表中但看起来很奇怪。请自己尝试一下所以我有包含产品的selectbox的HTML（选择框的选项是在jQuery中从mysql动态生成的。我不会进入那个。只要知道select“prodselect”在运行时包含值和id）：

<ul data-role="listview" data-theme="c" data-count-theme="b" data-inset="true">
<li>
    <div data-role="fieldcontain">
        <label for="prodselect" class="select">Choose product:</label>
        <select name="prodselect" id="prodselect">
        </select>
        <input type="button" name="appeprod" id="appeprod" value="Append product" data-icon="add" data-inline="true"/>
        </div>            
        </li>
</ul>

现在是我希望在点击时添加select选项的HTML部分（appeprod.click）

<ul name="listaprod" id="listaprod" data-role="listview" data-theme="c" data-divider-theme="e" data-count-theme="b" data-inset="true">
   <li data-role="list-divider">
        <h3 class="ui-li-heading">Selected Products</h3>
   </li>            
   <li id="products" name="products">
   </li>
</ul>

所以我希望将项目插入“产品”部分为此，我有以下脚本：

$(document).ready(function(){
        $('#appeprod').click(function() {
            var option = $('#prodselect').val();
            var box = document.getElementById('prodselect');
            var option2 = box.options[box.selectedIndex].text;
            $('#listaprod').append('<div data-theme="e" data-role="button">'+option2+' xxx</div>');
        });        
});

所以基本上，在按钮点击时，我想追加#listaprod，这是在#prodselect中选择的值。但是......正如您在此jsfiddle中看到的那样，所选项目的显示看起来很难看......它们看起来不像普通的jquery移动ul列表项。我在某个地方错过了一些格式吗？

Answer 1

添加动态创建的内容时，必须使用正确的jQuery Mobile样式进行增强。

在这种情况下，这将起作用：

$('#pg_invoicedtl').trigger('pagecreate');

或完整的javascript：

$(document).ready(function(){
    $('#appeprod').click(function() {
        var option = $('#prodselect').val();
        var box = document.getElementById('prodselect');
        var option2 = box.options[box.selectedIndex].text;
        $('#prodlist').append('<div data-theme="e" data-role="button" id="button_'+option2+'">'+option2+'</div>');
        $('#pg_invoicedtl').trigger('pagecreate');
    });        
});

工作示例：http://jsfiddle.net/q8wjh/1/

如果您想了解有关此主题的更多信息，请查看我的博客 ARTICLE ，您会找到有关此主题的更多信息。

jQuery mobile将项目添加到ul onclick

1 个答案: