I'm trying to make a really long jQuery mobile listview in popup. Listview should meet following conditions:
- thumbnail on left
- checkbox on right
- the checkbox should change checked on entire
li
click - it should have filter
I'm able to do all this without filter. After adding filter strange behavior occurs:
- If the listview is not scrolled down at all, listener gets fired, checkbox gets selected, but after that filter textbox gets focus.
- If it is scrolled down, I'm able to click the checkbox and check or uncheck it, but whenever I try to click the
li
the event isn't fired and the listview just scrolls up and filter textbox gets focus.
Listview:
<ul id="friends" data-role="listview" data-filter="true" data-filter-placeholder="Search friends">
<li id="some_id" data-icon="false">
<a>
<img src="img_url" alt="img_alt">
<div class="row middle-xs">
<div class="col-xs-10 row">
<div class="col-xs-12"><p>Friend name</p></div>
</div>
<div class="col-xs-2 row end-xs">
<input id="some_id" data-iconpos="right" data-theme="b" type="checkbox">
</div>
</div>
</a>
</li>
<!--- ... --->
</ul>
Listener:
$(function() {
$('ul li').click(function(e) {
if (!$(e.target).is('input[type=checkbox]')) {
var checkbox = $(this).find('input[type=checkbox]');
var checked = $(checkbox).is(":checked");
$(checkbox).prop('checked', !checked);
}
e.stopImmediatePropagation();
});
});
How do I get my listener fired when the listview is scrolled down and prevent the listview from scrolling up and filter textbox from getting focus? Calling e.stopImmediatePropagation()
didn't help.
Aucun commentaire:
Enregistrer un commentaire