Problem binding to checkbox that's inside a "click" bound element

1,030 views
Skip to first unread message

Benjamin Allison

unread,
Feb 28, 2012, 6:31:49 PM2/28/12
to KnockoutJS
So I'm using a table for navigation. The td's have click events bound
to them, so I have a nice percentage based navigation. Inside the td's
is text but also checkboxes that are being used to enable/disable some
other feature.

Because the td is bound with a click event, clicking the checkbox
simply triggers the events bound to the td. In fact, the checkbox
doesn't even get checked. It stays unchecked.

Weirdly, when I alerted out an error, the checkbox does get "checked",
but when I dismiss the alert, it reverts back to its unchecked state.

Now, I've tried stopPropagation in jQuery – standard practice to
handle bubbling... but no dice. Are there special considerations when
binding to an element that's inside a bound element, specifically one
that is click bound?
Message has been deleted

Benjamin Allison

unread,
Feb 28, 2012, 6:38:37 PM2/28/12
to KnockoutJS
Of course, if i set the ko.observable the checkboxes are checked-
bound to as true, all the relevant boxes are checked, and I cannot
uncheck
them. It looks like their state is somehow being overridden by the
click-bound element they are contained by.

Strangely though, if I click-bind the checkbox, the function it is
bound to will fire, but will remain unchecked.

FWIW I'm using Chrome on Mac OSX.

rpn

unread,
Feb 28, 2012, 7:00:23 PM2/28/12
to knock...@googlegroups.com
If you return true from your function bound to the td, then it will allow the default action to proceed.  Here is a sample:  http://jsfiddle.net/rniemeyer/773N7/

Benjamin Allison

unread,
Feb 28, 2012, 8:41:11 PM2/28/12
to KnockoutJS
Thanks for that!

In my code, because I'm sending parameters with the function, I had to
put the return in the view:

click: function(data) { $root.goToDay(data, $parent); return true; }

I also had to put the return true in the function that the checkbox
was bound to, since THAT was over-ridding the "checked" state as well.

Thanks rpn!

jaime...@gmail.com

unread,
Jul 4, 2012, 9:37:12 AM7/4/12
to knock...@googlegroups.com
damm thanks !! got the same problem ! ROFL

<input type="checkbox" data-bind="attr: { value: idCercaEletronica }, click: function(){alert('a'); return true; }" />


Reply all
Reply to author
Forward
0 new messages