KnockoutSpa (router.ts) Event listener and non trivial a tags

[cmdkeen]

The code for the clickEventListener in router.ts does not capture the click event on a tags that contain child elements:

<a data-bind="attr: { href: url }"
    <span data-bind="text: text"></span>
</a>

Whereas the non tag version works fine.

<a data-bind="attr: { href: url }"
    <!-- ko text: url --><!-- /ko -->
</a>

Switching to use the jQuery event selector and using currentTarget fixes everything for me. There's probably a Vanilla JS way of achieving the same thing but jQuery is in the project already and it is a schoolnight.

this.clickEventListener = evt => {
    let target: any = evt.currentTarget;
    if (target && target.tagName === 'A') {
        let href = target.getAttribute('href');
        if (href && href.charAt(0) == '/') {
            history.push(href);
            evt.preventDefault();
        }
    }
};

$(document).on('click', 'a', this.clickEventListener);

[SteveSandersonMS]

Thanks for reporting this! I'll adapt the template to do something along these lines soon.

[SteveSandersonMS]

Thanks again - this is now in the template source.