javascript - jQM 1.4 : event handler for buttons in listview -
i have listview containing styled items buttons : (working example : 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 buffer around 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>
in app, list built dynamically, static jsfiddle example show problem : click handler on buttons doesn't work.
i think it's maybe because click event attempt fired li on listview. possible have custom buttons in listview ? if possible, how declare event handler on them?
thanks help.
edit: after omar answer, removed div around buttons , click handler worked expected. click handler doesn't work when list built dynamically : http://jsfiddle.net/tq88p/3/
solution: finally, doesn't work buttons, works anchor. working example : http://jsfiddle.net/tq88p/4/
first, you're wrapping button
in div, while can use either <a>
or <button>
tags without need wrap of them.
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-lock ui-btn-icon-notext" id=""></a>
when append items dynamically, need delegate events items.
$(document).on("pagecreate", "#pageid", function () { $("li").on("click", "a, button", function () { /* code */ }); });
Comments
Post a Comment