取消绑定元素的事件，这些元素以后将添加到DOM中

Question

I have a div with class="backdrop". This will be added to DOM when I click a button. To this is bound an event of 'wheel'.

I cannot avoid the binding of the event(happening through library) So i will want to unbind this globally.

I tried : $(".modal-backdrop.am-fade").unbind('wheel');

This works but I have to write this statement after each time the div is added to the DOM. I want something which I can write only once and would apply to all the divs which would be added to the DOM in future

Answer 1

I want something which I can write only once and would apply to all the divs which would be added to the DOM in future

If code in the library you're using is adding elements and binding events to them, you'll have to unbind them as you go, there's no alternative.

If you already have some way of triggering that (the library tells you when it adds a div), then you'll just have to have that code respond to that event.

If you don't already have some way of triggering it, you can use mutation observers to watch for the divs being added so you can unbind them. They're well-supported by modern browsers. Slightly less modern browsers may have sufficient support for the old mutation events that you can use a library that provides a mutation observer polyfill using mutation events (just search for "mutation observer polyfill"). Worst case, on really old browsers, you'll have to poll.

---

Of course, the best answer is to either stop using the library if it doesn't do what you want, or modify it (this is JavaScript, after all) so it doesn't do what you don't want.