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

时间:2015-10-02 14:46:12

标签: jquery listview checkbox filter click

我试图在弹出窗口中创建一个非常长的jQuery移动列表视图。 Listview应符合以下条件:

    左边的
  • 缩略图
  • 右侧的
  • 复选框
  • 应在整个li点击
  • 上更改复选框
  • 它应该有过滤器

我能够在没有过滤器的情况下完成所有这些操作。添加过滤器后会出现奇怪的行为:

  1. 如果列表视图根本没有向下滚动,则会触发侦听器,选中复选框,但在该过滤器文本框获得焦点之后。
  2. 如果向下滚动,我可以点击复选框并选中或取消选中它,但每当我尝试点击li时,事件都没有被触发,而列表视图只是滚动up和过滤器文本框获得焦点。
  3. 列表视图:

    <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>
    

    监听器:

    $(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();
        });
    });
    

    当列表视图向下滚动并阻止列表视图向上滚动并过滤文本框以获得焦点时,如何触发我的侦听器?致电e.stopImmediatePropagation()没有帮助。

0 个答案:

没有答案