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。第二个错误，您在.listview("refresh")上调用了不存在的增强ul.ScriptList。

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

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

将项目删除到更新的样式后，您还需要refresh列表视图。

<强> Demo

使用jQuery Mobile附加拆分按钮Listview

1 个答案: