Prevent an element within header from expanding

I'm using jQueryUI Accordion, and genereate the elements on the fly. I need to prevent accordion expanding if we click Remove action link inside the header.

开发者_JS百科To stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this.

No luck with return false. Please see the demo.

I don't think you will have too much luck achieving what you want with live(), as jQuery only supports event bubbling and not event capturing. The design decision was probably due to the fact the IE does not support event capturing, even though W3C's speicification has the flexibility for both.

Your best bet is to attach a click event to the remove button right after it is inserted into the DOM (to stop the event propagation) before you re-initiate the accordion. You may need to take care not to bind click event to the existing remove buttons multiple times.

The pseudocode would look something like this:

1. call .accordion('destory') on the current accordion
2. create the new element, i.e. <h2>...<a class="revmoe">...</a></h2><div>...</div>
3. insert the new element to the existing accordion
4. bind a click event to the remove button in the new element to stop event propagation
5. initiate the accordion, i.e. .accordion({..})

SO posts on event capturing in jQuery:

• event capturing with jQuery
• Event Capturing vs Event Bubbling

Just use the given functions by the plugin:

$('#accordion').accordion({active:8, disabled:true});

jQuery('.remove').click(function(){
$('#accordion').accordion('disable');

})

I chose the option "active:8" because this way no header is opened from the beginning (index -1 does not work for IE). Check the function and options out at: http://docs.jquery.com/UI/Accordion

Hope this is what you were looking for :-)