Question

我正在使用jQm将行添加到拆分列表视图中，并且我只能获取第一行（未动态添加）来触发click事件。我假设有一个我需要调用的刷新功能，但我无法弄清楚是什么 - 我已经刷新了listview，我希望能解决它......

这是代码：

<ul data-role="listview" data-split-icon="minus" id="list">
    <li>
        <a href="#">Item Description</a>
        <a href="#" class="delbtn">remove</a>
    </li>
</ul>
<a href="#" id="addbtn" class="ui-btn">Add item</a>

JS：

var itemcount=1;

$('#addbtn').click(function() {
   var addstr = '<li><a href="#">Item Description '+itemcount+'</a><a href="#" id="delbtn-'+itemcount+'" class="delbtn">remove</a></li></ul>';
    $('#list').append(addstr);
    $('#list').listview();
    $('#list').listview('refresh');
    itemcount++;
});

$('#list a.ui-li-link-alt').on("click",function() {
   alert('delbtn clicked'); 
});

我错过了什么？

Answer 1

因为您正在动态添加DOM元素，所以您无法提前绑定。而是使用事件委托（https://learn.jquery.com/events/event-delegation/）：

$('#list').on("click", ".delbtn", function() {
   alert('delbtn clicked'); 
});

这表示将click事件绑定到列表中包含class delbtn的任何项目，即使它们尚不存在。

更新了 FIDDLE

在动态添加的行上拆分listview辅助按钮单击事件

1 个答案: