vendredi 2 octobre 2015

jQuery mobile listview with filter and checkbox - li click event not fired

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:

  1. If the listview is not scrolled down at all, listener gets fired, checkbox gets selected, but after that filter textbox gets focus.
  2. 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