Is there a way to cause the click to run after the event has bubbled? In the below scenario, clicking the span triggers removeChildNode function which removes the span from dom. this prevents the span's click from triggering a click on the 'div[data-identifier]' node. I'd like the event to bubble up and then the function to execute.
<div data-identifier>
<div data-bind="click: removeChildNode">
<span>Click Me!</span>
</div>
</div>
removeChildNode = function() { $(arguments[1].target).children()[0].remove(); }
$('body').on("click", 'span', function(event) {
// use the span to navigate around and do something interesting
$(event.target).closest('div[data-identifier]').click();
});
If you're going to use Knockout, you need to let it control the DOM, and you manipulate your viewmodel. You should have some viewmodel entity that represents the removable child, and your removeChildNode function would remove it (or set it into a state that indicates it is removed). As a general rule, jQuery selectors indicate you have failed to model something.
There is no point in having two ways to set up click events. If you are going to use a jQuery click event in one place, you should use jQuery for all your click events and not use Knockout.
That said, by default, Knockout does allow events to bubble. You could put a setTimeout around the node remover to give the DOM time to propagate events before you remove the node, if that's what's keeping your outer click from firing. You will have fewer problems of this sort if you leave the DOM entirely to Knockout.