我有一个列表视图,其中包含带有按钮的样式项:(工作示例: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示例显示了我的问题:按钮上的单击处理程序不起作用。

我认为这可能是因为click事件仅由li在listview上触发。列表视图中可以有自定义按钮吗?
如果可能,如何在它们上声明事件处理程序?

谢谢你的帮助。

编辑:奥马尔回答后,我删除了按钮周围的div并单击处理程序按预期方式工作。但是在动态构建列表时,单击处理程序不起作用:http://jsfiddle.net/tQ88p/3/

解决方案:最后,它不适用于按钮,但适用于锚点。工作示例:http://jsfiddle.net/tQ88p/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

07-24 09:44
查看更多