Dynamically Created Check Box in Header of Jquery UI Accordion

Question

I am creating an accordion from a DB with checkboxes in the headers. I have seen the solutions that solve the problem of clicking the checkbox without activating the accordion using the click() function, but since I am dynamically creating the accordion, the click() function will not work. I am at a loss as how to solve the problem of clicking a checkbox in a dynamically generated accordion header.

The problem is that the click event activates the accordion before the on('click') has a chance to run e.stopPropagation.

Any Ideas?

Answer 1

The problem is when you use event propagation to register the event handlers, it is normally attached to the body or some elements which is much higher up in the hierarchy. So by the time the events attached to accordion headers will be executed resulting in collapsing/expanding the tab.

Since you are creating the checkbox dynamically, the solution is to add the click event handler preventing propagation to the checkbox after it is created.

Ex:

var chk = $('<input />', { type: 'checkbox'});
chk.click(function(e){
    e.stopPropagation();
});
chk.appendTo(accordionHeader)