使用 jQuery Mobile 添加拆分按钮 Listview

Question

我有一个小函数，它接受输入文本并将其附加到列表视图，它还添加了一个“删除”按钮，当按下它时，它会从列表中删除元素。 请在 http://jsfiddle.net/4h857/ 找到一个工作示例。

我一直在尝试修改此删除功能以节省一些空间并通过在列表中附加拆分按钮（带有“删除”图标）使其看起来“更好”。 希望能在我在网上搜索http://jsfiddle.net/ffabreti/Q4SCt/1/时发现的这个小提琴中得到类似的东西。

现在我没有对我的小提琴进行任何更改，因为无论我进行什么更改都会弄乱 UI。

这是我小提琴上的脚本：

$('#AddScript').click(function () {
if ($('#MedNameStren').val() != '') {
    var text = '<h2>' + $('#MedNameStren').val() + '</h2>' + '<button>Delete</button>';
    $('<li />', {
        html: text
    }).appendTo('ul.justList');
    $('button').button();
} else {
    alert('Please fill all fields....');
}
$('ul.ScriptList').listview('refresh')

});

$('ul').on('click', 'button', function (el) {
$(this).closest('li').remove();
});

我已经尝试将 <button>Delete</button> 更改为 <a href="#">gear</a> 就像在另一个小提琴中一样，但这不会给我预期的结果。

我相信我在做一些非常愚蠢的事情，但是经过数小时的研究后，我找不到可以让我产生想法的示例或东西，因此我可以思考并解决它。

我将不胜感激任何建议，因为我仍然是 jQuery/Mobile 新手，所以请坦白我的无知。

Answer 1

第一个错误，您忘记将data-role="listview" 添加到ul。第二个错误，您在不存在的ul.ScriptList 上调用增强.listview("refresh")。

拆分按钮的正确标记如下。

<li>
  <a href="#">
    <h2>Text goes here</h2>
    <a href="#"></a> <!-- split button -->
  </a>
</li>

您还需要在删除项目后refreshlist-view 以更新样式。

Demo