jQuery UI LISTVIEW not refreshing



使用jQuery UI(w/jQuery 1.9.1)。我有一个可排序的列表。我正在通过一个表单添加dom元素。用户单击一个按钮,就会出现一个对话框。用户在文本框中键入文本,然后单击"添加页面"。一个新的列表项将附加到列表中。问题是列表视图没有包含正确的CSS。

这是一个JSfiddle-->http://jsfiddle.net/RQKng/1/

单击红色按钮之前,您可以在列表项之间单击,并注意到所选列表项变为蓝色。但是,任何新项目都不会变成蓝色。

我试过了:

$('#pageList ul').trigger('create').listview('refresh');

但我收到一个错误,"Object没有方法"listview"

1:问题出在这一行:

$('.page').click(function() {
        $('.page').removeClass('selected');
        $(this).addClass('selected');
    });

2:解决方案在这里:jsFiddle

3:一些解释:

因为您有事先不知道的动态元素,所以必须让jQuery知道这一点。来自jQuery文档:

事件处理程序仅绑定到当前选定的元素;他们必须在代码调用.on().时存在于页面上

你想要的是:

Delegated events have the advantage that they can process events from descendant 
elements that are added to the document at a later time. 

解决方案:

$('.item-list').on("click","li",function() {
    $('.page').removeClass('selected');
    $(this).addClass('selected');
});

最新更新