Question

I have a jQuery UI accordion. In each heading bar there is an ‘Edit’ icon. Clicking this icon opens a Bootstrap modal.

At the moment, clicking the icon launches the modal but obviously triggers the accordion menu expand/collapse event as well. How can I prevent it?

Demo: http://jsfiddle.net/M3MDJ/3/

As far as I can tell, the Bootstrap modal event happens first because if I use event.stopPropagation() or event.stopImmediatePropagation() nothing at all happens; even the modal is prevented from opening.

Answer 1

You will have to control modal with javascript not auto inlitialize with data- attributes. Otherwise when bootstrap automatically binds the click handler it has no way to know not to propagate the event

$(document).ready(function() {
  $('.edit').click(function(e){
    e.stopPropagation();
    $('#modal-edit').modal()
  })
  $('#accordion').accordion({
    collapsible: true,
        active: false
  });  
});

DEMO: http://jsfiddle.net/M3MDJ/4/