jQuery click handlers not firing for DotVVM buttons

🌎 Discussion in English
1

Although mouseup event handler (bound by on jQuery method) works just fine for GridView rows, for the life of me I cannot make the click event handler to work.

image

I’ve tried various selector strings, even the dumb ‘button’ one and also tried placing .on() at the time of dotvvm.events.afterPostback instead of at dotvvm.events.initCompleted (when the handler for ‘mouseup’ works just fine).

If I bind the handler in the markup like this:

image
image880×30 6.07 KB

and having the handler as a simple function like this:
image

it works.
I don’t want it like that. I want to have the handlers bound by the jQuery “.on”

What am I doing wrong here??

2

What do you want to do from onclick? Maybe Custom Postback handlers can help: Custom postback handlers | DotVVM Documentation

1 Like
3

I think the problem if you use the .on('click', 'selector', ...) overload, jQuery does not attach the click event handler to the button, but adds it to the document and then triggers the function only for buttons. However, DotVVM onclick handlers prevent bubbling the event to the parent elements, so it doesn’t get called.

It will work, if you instead use $("button").on("click", e => ...).

However, that has the disadvantage that the button must already exist when the event registration happens - it will be an issue if it’s in a dynamic Repeater/GridView, … Another way to circumvent both of these issues would be to register the event to the capture phase (W3C / UI Events / Event flow), however you’ll have to use native addEventListener("click", () => ..., {capture: true}) function, jQuery AFAIK doesn’t support.

4

I’ve suspected bubbling is prevented by KnockoutJS or DotVVM. This leaves us, for now, with what has the least departure & additional complication in regards to the existing legacy JS code: creating functions and binding them by means of onclick html attribute.

Custom postback handlers look useful but in our case the onclick handler operates only on client-side (dropping curtains on sections of UI, no postback).
Thanks!