CODEWITHSUNDEEP
javascriptlistviewjquery-mobileevent-handling
Mat
Mat

Reputation: 185

jQM 1.4 : event handler for buttons in listview

I have a listview containing styled items with 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 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>

In my app, the list is built dynamically, but the static jsfiddle example show my problem : the click handler on buttons doesn't work.

I think it's maybe because click event is attempt to be fired only by li on listview. Is it possible to have custom buttons in listview ? If it is possible, how to declare the event handler on them?

Thanks for your help.

EDIT: after Omar answer, I removed div around buttons and click handler worked as expected. But click handler doesn't work when list is built dynamically : http://jsfiddle.net/tQ88p/3/

SOLUTION: finally, it doesn't work with buttons, but it works well with anchor. Working example : http://jsfiddle.net/tQ88p/4/

Upvotes: 1

Views: 169

Answers (1)

Omar
Omar

Reputation: 31732

First, you're wrapping a button in a div, while you can use either <a> or <button> tags without the need to wrap any 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 you append items dynamically, you need to delegate events to those items.

$(document).on("pagecreate", "#pageID", function () {
  $("li").on("click", "a, button", function () {
    /* code */
  });
});

Demo

Upvotes: 4

Related Questions