[solved] Jquery dropdown stops after click event

30 sec youtube video about the issue

Or (Take a read)

I am trying to achieve a facebook notification system. The way I am doing it is to have a dropdown jquery inside onRendered.

And the dropdown has a helper function feeding data to the list. The counter bubble is coming from another helper function.

More over, there is a event handler set that makes the bubble disappear upon clicking by making the notification status seen.

All is good, but as soon as I click he photo Request button to initiate the click handler, it does makes the bubble go away by setting the statuses as seen but the dropdown stops working. Refreshing the page solves the issue.

Here is the issue reproduced in a github repo:

Any help is appreciated. Thanks

Didn’t try but I have similar experience with Semantic-UI. Usually the issue is when you click your action, the DOM was somehow changed with reactivity that breaks the applied jQuery binding. Reload rebuilds everything so it’s fine. You could observe the DOM tree in browser element tree to see what happened and modify your code accordingly.

1 Like

curtesy of @serkandurusoy Problem was solved. Here is the solution


1 Like

You should also explain the problem and why I did what I did :slightly_smiling:

1 Like