Sortable Accordion Modified to Implement More On Click However New Levels Will Not Expand [closed]

Question

JS Fiddle: http://jsfiddle.net/JF7PD/

I've been doing extensive work on this and I've just able almost got it fully working. The reason why I am asking for help now is that I don't have a clue why my newly added accordion(s) do not expand upon being clicked.

I've got a feeling it may be due to the newly added code as I was having problems using my code in the file so instead I looked at the source and copied the accordion level to be used and all appears to look fine apart from them not expanding.

Thank you for any help in advanced,

Best Regards, Tim

Answer 1

Your code isnt very easy to read (it has a lot of code not relevant to the question), but I'm guessing it's because of the event binding.

You can not bind events to elements that don't exists:

$('a').on('click', function(){ alert('clickety'); });
<div id="I_Will_Get_Anchors_via_Ajax"></div>

This will not fire when the anchors are clicked, because they dont exist yet. To fix this, you need to defer the event to something that does exist:

$('#I_Will_Get_Anchors_via_Ajax').on('click', 'a', function(){ alert('clickety'); });
<div id="I_Will_Get_Anchors_via_Ajax"></div>

In your case you don't load it via AJAX, but via the append function with html in it, but it's the same principle.