Override event in jQuery assigned in MooTools

Question

One of the site components loads script with this.

window.addEvent('domready', function(){ 
    $$('.kqreply').each(function(el){
        el.addEvent('click', function(e){
            e.stop();
            // SOMETHING ELSE.
    });
});

It is loaded in external JS file. After that I load declaration in the head.

<script>
    jQuery(document).ready(function(){
        $$('.kqreply').each(function(el){
            el.removeEvent('click');
        });

        jQuery('.kqreply').unbind('click');

        jQuery('.kqreply').each(function(){
            jQuery(this).click(function(e){
                e.preventDefault();
                e.stopPropagation();
            });
        });
    });
</script>

But event defined in first code is triggered anyway. How to that I can override event and run different code?

Answer 1

so this is the api: https://github.com/mootools/mootools-core/blob/master/Source/Element/Element.Event.js#L83-L101

mootools allows you to remove events you don't own, which is not a great design decision and is currently being changed for prime - but works well in your favour here.

use either

$$('.kqreply').removeEvents('click'); 
// or all mootools events...
$$('.kqreply').removeEvents();`

you can get to individual functions you don't own via element storage.

el.retrieve('events')['keys']['click'] will be an array of all bound fn to the click event.