1

我有一个小功能，它接受输入文本并将其附加到列表视图，它还添加了一个“删除”按钮，当按下它时，它会从列表中删除元素。请在此处找到一个工作示例请在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 新手。

4

1 回答 1

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在删除项目以更新样式后进行列表查看。

演示

于 2013-11-12T20:39:48.883 回答