jquerymobile - 带有折叠的列表项上的复选框 - 避免展开/收缩操作

Question

我混合使用了可折叠格式的listview项目和一个用于选择/取消选择项目的复选框，但是当我单击复选框时，展开/收缩的操作将被触发。

有什么想法可以避免它（或者再次签订合同）？

标记......

    <li id="item"  data-role="collapsible" data-iconpos="right" data-inset="false" data-mini="true">
    <h3>
        <div class="checkBoxLeft">
            <input type="checkbox" name="check" id="check" class="hidden-checkbox check-item" value="1" />
        </div>
        <span class="checkBoxLeftTitle">18/10 - Quarta</span>
    </h3>

Answer 1

所以我假设您使用jquery mobile来处理可折叠的内容。

我检查了lib如何处理你要点击的区域的扩展并附加了一个事件，该事件将检查事件的目标是否是输入并停止传播。这是fiddle。

我使用了https://stackoverflow.com/a/2641047

中的bindFirst

你必须在代码上使用bindFirst函数，因为jquery mobile首先附加了它们的事件，我们想在打开内容之前停止传播。

// [name] is the name of the event "click", "mouseover", .. 
// same as you'd pass it to bind()
// [fn] is the handler function
$.fn.bindFirst = function(name, fn) {
  // bind as you normally would
  // don't want to miss out on any jQuery magic
  this.on(name, fn);

  // Thanks to a comment by @Martin, adding support for
  // namespaced events too.
  this.each(function() {
    var handlers = $._data(this, 'events')[name.split('.')[0]];
    console.log(handlers);
    // take out the handler we just inserted from the end
    var handler = handlers.pop();
    // move it at the beginning
    handlers.splice(0, 0, handler);
  });
};

$(".ui-collapsible-heading").bindFirst('click', function(e) {
  var target = $(e.target);
  if ($(e.target).is('input')) {
    e.stopImmediatePropagation();
    e.stopPropagation();
  }
});