2014-02-19 60 views
1

我将行添加到使用jQm的拆分listview中,并且我只能获取第一行(未动态添加)来触发单击事件。我想有一个刷新功能的地方,我要打电话,但我想不出什么 - 我已经刷新列表视图,这是我有望解决它......在动态添加的行上拆分listview辅助按钮单击事件

这里的小提琴: http://jsfiddle.net/z36fy/1/

和下面的代码:

<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'); 
}); 

我缺少什么?

+0

'$'的',而不是$( 'delbtn')(文件)。在( “点击”, “.delbtn” 功能()。点击(函数(){'当你处理动态元素时,这被称为事件委托http://jsfiddle.net/Palestinian/z36fy/2/ – Omar

+0

[绑定动态添加元素在jQuery手机中](http:// stackoverflow。 com/questions/20431392/binding-dynamic-added-elements-in-jquery-mobile) – Omar

+0

知道它必须简单 - 谢谢! – richbee

回答

1

由于您正在动态添加DOM元素,因此无法提前进行绑定。相反,使用事件代表团(https://learn.jquery.com/events/event-delegation/):

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

这是说结合的Click事件与列表中的类delbtn任何物品,即使还不存在他们。

更新FIDDLE

相关问题