Is there any way to create a listview in Jquery Mobile that has clickable list items and each item has 3 buttons? I don't want to use split-button listview. I have tried to create this but button clicks are not working. Clicking on any of the button behaves like clicking on list item.
1
-
which jQM version are you using?Omar– Omar2014-04-25 16:06:42 +00:00Commented Apr 25, 2014 at 16:06
Add a comment
|
1 Answer
You can add e.stopImmediatePropagation(); (http://api.jquery.com/event.stopimmediatepropagation/) to the button clicks so they will not propagate to the parent listitem.
UPDATE:
OP mentioned in comments that listitems are generated dynamically. The original code still works because event delegation (https://learn.jquery.com/events/event-delegation/) was used for the buttons. Here is an updated example:
Empty UL in markup
<ul data-role="listview" id="thelist">
</ul>
On pagecreate, fill the listview and add the click handlers
$(document).on("pagecreate", "#page1", function(){
//make list dynamically
var allItems = '';
for (var i=0; i< 4; i++){
allItems += '<li data-rowid="' + i + '"><a href="#"><div data-role="controlgroup" data-type="horizontal"><input type="button" value="Hmm" /><input type="button" value="No" /><input type="button" value="Yes" /></div> Item ' + i + ' text or description</a></li>';
}
$("#thelist").empty().append(allItems).listview("refresh").enhanceWithin();
$("#thelist").on("click", "li input", function(e){
e.stopImmediatePropagation();
var rowid = $(this).parents("li").data("rowid");
var btnText = $(this).val();
alert("You clicked the button: " + btnText + " on row number: " + rowid);
});
$("#thelist").on("click", "li a", function(e){
alert("You clicked the listitem");
});
});
Updated DEMO
ORIGINAL:
<ul data-role="listview" id="thelist">
<li data-rowid="1">
<a href="#">
<div data-role="controlgroup" data-type="horizontal">
<input type="button" value="Hmm" />
<input type="button" value="No" />
<input type="button" value="Yes" />
</div>
Item 1 text or description
</a>
</li>
</ul>
$(document).on("pagecreate", "#page1", function(){
$("#thelist li").on("click", "input", function(e){
e.stopImmediatePropagation();
var rowid = $(this).parents("li").data("rowid");
var btnText = $(this).val();
alert("You clicked the button: " + btnText + " on row number: " + rowid);
});
$("#thelist li").on("click", "a", function(e){
alert("You clicked the listitem");
});
});
You could also put the buttons outside of the listitem anchor tag and use CSS to position everything nicely...
7 Comments
Adnan
Thanks. This works fine in this example. But in my case list rows are generating dynamically. In that case, neither list item click fires nor button click. Any idea?
ezanker
@Adnan, I have updated my fiddle to create the listitems dynamically: jsfiddle.net/ezanker/y79GW/2 Because my event handlers were using event delegation, they still work just fine. If your UL is also created dynamically, you need to put the handler on the document and then delegate to the buttons/listitem.
ezanker
@Adnan, I have updated my answer and FIDDLE with dynamic listitems.
Adnan
Thanks. I got the idea.
Adnan
BTW this only works if you populate the list first and then bind click events. I changed your example code to bind the click events first and then populated the list and clicks stopped working. jsfiddle.net/y79GW/4
|