KnockoutJS click data bind not working when used with with binding

Question

What I'm trying to do is to hide an html when a flag, selected, is true. Which I was able to do via click data bind and below works great.

<a href='#' data-bind='click: selected, with: myObject, visible: !selected()'>
    test
</a>

While above works as I intended it to be, below doesn't work.

<a href='#' data-bind='click: selected, with: myObject, visible: !selected()'>
    <div>test</div>
</a>

I have tried changing 'a' to 'div' but that still didn't work. Can somebody help me understand what is going on?

Answer 1

Ah. I misunderstood what you were struggling with.

The problem is that with only applies to child nodes. So, you need a wrapper around the <a> tag in order to apply the with binding.

Updated fiddle