Custom onClick jquery on accordion header only fires once.

Hi all,

I am trying to fire an onclick function when an Accordion is closed. I have got it working but only on the first instance of the click. If i re open the accordion and close it again the function is not reached although I can clearly see in the browsers dev tools the class change on which I have put the listener is still firing.Here is  my function which is written in a jquery webblock and in a document.ready(function(){})


SyntaxEditor Code Snippet

$('#"+insuranceAccordian.Id+" "+".AccordionVertical__header').click(function () {
 if(!$('.AccordionVertical_item').hasClass('open') ) {
 
        alert('Contractor details have been saved');
        $('.saveButton').click();
}
})


Any pointers as to why this does not get reached after the first time would be greatly appreciated.

I should point out I am using this to  fire a save button in a webblock which is inside the accordion from the parent screen.


Thanks

Hi Rob,

Are you using ajax refresh on the accordion? I think you also need to refresh the jquery webblock where your code is. Hope this will help. Thanks!

Joseph Francisco wrote:

Hi Rob,

Are you using ajax refresh on the accordion? I think you also need to refresh the jquery webblock where your code is. Hope this will help. Thanks!


Hi Joseph, 

Im afraid this has not worked for me. I have put another on click in the jquery to fire a hidden button in the parent screen which points to a screen action that refreshes the accordion and the jquery block but no joy. I even put it in a setTimeout of 1500m/s to give it a chance to fire the original save action before the 'open' class is changed by the refresh. Its a shame i cant add my own jquery directly into the accordion js, I could just fire the onclick in the same function as the add/remove class function of the accordion. Aah well back to the drawing board.

Hi Rob,


did you resolve this issue?
I've the same problem....

Regards,

Jeroen

Hi Rob,


i've managed to solve this:

Just add an expression on your page with for example:

SyntaxEditor Code Snippet

"<script>
$( document ).ready(function() {
function someFunction(){
  //Some functionality
}

var header = document.getElementsByClassName('AccordionVertical__header');
var numheaders = header.length;
for (var i = 0; i < numheaders; i++) {
  header[i].addEventListener('click', someFunction, false);
}
  
});
</script>
"


Thanks for the reply on this topic, unfortunately I do not need this functionality anymore as my needs have changed but I'm sure this solution will come in handy in the future.

In that case, could you mark my repley as solution?
Thanks !