On a web application we were building I had a strange issue. A jQuery widget was working as expected until I also tried to use it inside an Angular application. The widget that was responsible to expand or collapse a panel, refused to work. Clicking on the panel header had no effect anymore.
This was one of those situations where the solution is obvious afterwards, but I had no clue at first what was going on .
When looking inside the widget, I found code similar to this:
Nothing wrong with that code you should say! Unless you realize that this code is only executed when the DOM is ready. The HTML views that are loaded by Angular are loaded afterwards when the document ready already fired. So the initialization logic for the widget is not executed for new elements loaded by Angular.
To fix it, I updated the widget to use the (newer) jQuery event delegation syntax:
So simple, once you know it…