我有一个listview,其中包含带按钮的样式项:(工作示例:http://jsfiddle.net/tQ88p/)
<ul id="runningJobList" data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li data-role="list-divider" role="heading" class="ui-li-divider ui-bar-inherit ui-first-child">Traitements en cours</li>
<li class="styled-li ui-li-static ui-body-inherit ui-last-child" title="Create a buffer around an input vector file">
<div class="processStatus">
<h6>Buffer</h6>
<p><strong>ACCEPTED: </strong>Process foo accepted</p>
</div>
<div class="processButtons">
<button id="holdProcess-f80a5070-c3e8-11e3-ae6a-005056af4240" data-inline="true" data-icon="lock" data-iconpos="notext"></button>
<button id="killProcess-f80a5070-c3e8-11e3-ae6a-005056af4240" data-inline="true" data-icon="delete" data-iconpos="notext"></button>
</div>
</li>
</ul>
在我的应用程序中,列表是动态构建的,但静态jsfiddle示例显示我的问题:按钮上的单击处理程序不起作用。
我认为这可能是因为点击事件试图仅由列表视图上的li触发。在listview中可以使用自定义按钮吗? 如果可能,如何在它们上声明事件处理程序?
感谢您的帮助。
编辑:在Omar回答之后,我删除了div周围的按钮,然后单击处理程序按预期工作。但是动态构建列表时,点击处理程序不起作用:http://jsfiddle.net/tQ88p/3/
解决方案:最后,它不适用于按钮,但它适用于锚点。工作示例:http://jsfiddle.net/tQ88p/4/
答案 0 :(得分:4)
首先,您将button
包装在div中,而您可以使用<a>
或<button>
标记,而无需包装任何标记。
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-lock ui-btn-icon-notext" id=""></a>
当您动态追加项目时,您需要委派事件到这些项目。
$(document).on("pagecreate", "#pageID", function () {
$("li").on("click", "a, button", function () {
/* code */
});
});
<强> Demo 强>