Framework7: DOM event .off('event') does not unbind

[adadgio]

This is a (multiple allowed):

• bug
• Framework7 Version: 1.4.2
• Platform and Target: All platforms

What you did

Tried to unbind an event attached to an element.

$$(this.form).off('submit').on('submit', function (e) {
    //...
});

Expected Behavior

Should unbind event and re-attach it.

Actual Behavior

Does not unbind event, as a result the event is bound multiple times (this code is called each time a particular page is inited).

[ZanderBrown]

you using an anonymous function so this isn't an F7 bug it's a feature of javascript itself. Also you have to tell DOM7 what to unbind

_Workaround_
Replace your code:

$$(this.form).off('submit').on('submit', function (e) {
    //...
});

with:

formSubmit = function (e) {
    //...
};
$$(this.form).off('submit', formSubmit);
$$(this.form).on('submit', formSubmit);

Found this out the hard way when the same handler was applied 40 times to the same element!

_Edit_
See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

[adadgio]

After further code investigation, this issue was not caused by framework 7 but by another script. It works !

[xiefangzhenz]

$$('.col-imageDiv-a').off('click',aa); $$('.col-imageDiv-a').on('click',aa);
this code can't work,how can I solve this error?thanks

[ZanderBrown]

define

this code can't work

What's happening? Is the handler being added twice? not at all?
What is 'aa'?

[xiefangzhenz]

@ZanderBrown thanks for reply me.

'aa' is a function。

function will be add twice when load data finished,so I want to solve this error.

so,I unbind function before bind 'aa',but '$$('.col-imageDiv-a').off('click',aa); ' doesn't work

[xiefangzhenz]

@ZanderBrown I solve this error,'$$(document).on('click','.col-imageDiv-a', aa);' can solve multiply bind.

[vmexia]

Having this same problem, the following code is inside page:init,

clickElem = function (e) {
console.log('elem clicked');
var classes = $$(this).attr('class').split(' ');
var id = classes[1];
console.log(id);
}
$$('body').off('click', '.elem', clickElem);
$$('body').on('click', '.elem', clickElem);

Everytime I init the page it increments a click call.

[ZanderBrown]

Put

clickElem = function (e) {
    console.log('elem clicked');
    var classes = $$(this).attr('class').split(' ');
    var id = classes[1];
    console.log(id);
}

outside the page:init handler

Also what is that click handler attempting to do / why?

[vmexia]

Well it is not completed yet, the objective of this specific handler is to "handle" the click on a list item and load a new page (roomTypeDetails), which will display and allow to modify the info of that element with id=X.
Don't know if this helps, but the record list is also generated on page:init using template7. The generated html is added to the template BEFORE defining the event handlers.

I tried that workaround already, the problem is that everytime the page:init is called (every time that page is loaded) it will add a new .on('click') handler to that class/id. The "solution" that works is to put the .on('click') outside page:init itselft, but since that delegate its specific for that page it doens't really make sense to me defining it "globally". I just don't understand why the .off('click') it's not working as exemplified on https://api.jquery.com/off/

Cumpz.

[ZanderBrown]

function clickElem (e) {
    console.log('elem clicked');
    var classes = $$(this).attr('class').split(' ');
    var id = classes[1];
    console.log(id);
}

myApp.onPageInit('*', function (page) {
    $$(page.container).off('click', clickElem);
    $$(page.container).on('click', clickElem);
});

[vmexia]

That worked like a charm :D.

Just for future reference, do you understand why does it work that way, but not when defining the function inside page:init?

Cumpz.

[ZanderBrown]

because to javascript it's not the same function because the function would be redeclared in each call of page:init

[vmexia]

Is it a particular case of using page:init? I tried on the browser console to define function a () { console.log('test'); } twice, and after calling a(), only one "test" was displayed.

[ZanderBrown]

it's a bit more complicated than that. I'll try to draw some graphs

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.