jquerymobile - checkbox on list item with collapse - avoid the expand/contract action

Question

I did a mix of listview item with collapsible format and a checkbox to select/unselect the item but when I click on checkbox the action of expand/contract the container is fired.

Any idea to avoid it (or contract again the item) ?

The markup...

    <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

So I assumed you were using jquery mobile to handle the collapsible.

I checked to see how the lib handles the expand of the area you're clicking and attached an event that will check if the target of the event is an input and stop the propagation. Here is a fiddle.

I used the bindFirst from https://stackoverflow.com/a/2641047

You'll have to use the bindFirst function on your code because jquery mobile attaches their event first, and we want to stop the propagation before opening the content.

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