Menu
I am working on a new project that is using knockout js. I have setup a small table that displays images and info entered into a form that populates an observable array. I have the images wrapped with an anchor (link) tag and I am feeding the in the href through the KO data-bind. See below.
<a data-bind="attr: {href: imgUrl}" target="_blank"><img class="imgThumb" data-bind="attr: {src: imgUrl}"/></a>
All of this displays as expected, however none of the links will actually click through to the image location.
An array entry looks like this:
col1: 'Bert', col2: 'Muppet', col3: 'Sesame Street', imgUrl: 'http://images3.wikia.nocookie.net/__cb20101210195428/muppet/images/4/40/Bert1970s.jpg'
The rendered HTML looks like this:
<a data-bind="attr: {href: imgUrl}}" target="_blank" href="http://images3.wikia.nocookie.net/__cb20101210195428/muppet/images/4/40/Bert1970s.jpg"><img class="imgThumb" data-bind="attr: {src: imgUrl}" src="http://images3.wikia.nocookie.net/__cb20101210195428/muppet/images/4/40/Bert1970s.jpg"></a>
Once again, none of my links work, they will not click through to the image location as I expect them to. Can anyone help me here and point out what I am missing. Also, of note, I have tried adding a click: function(){ return true; } as well, and that didn't help either. Thanks in advance and a demo can be found here: http://dev.voidbase.com/working.html
832
You are on the right track with
Also, of note, I have tried adding a
click: function(){ return true; }as well, and that didn't help either.
But in itself the click: function(){ return true; } is not enough because the click event will still bubble up so you need to use the clickBubble: false option (see in also in the documentation):
<a target="_blank" data-bind="attr: {href: imgUrl},
click: function() { return true;}, clickBubble: false">
<img class="imgThumb" data-bind="attr: {src: imgUrl}"/>
</a>
Demo JSFiddle.
By the way your click binding on the body element "steals" your click event: <body style="padding-top: 100px;" data-bind="click: modalKiller">. So if return true from your modalKiller handler it also fixes your problem.
87
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
