All geek questions in one place

Knockout.js dynamic links don't click

I am working on a new project that uses js knockout. I set up a small table that displays images and information entered into a form that fills the observed array. I have images wrapped with a link tag and I upload it to href via KO data binding. 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, but none of the links actually move to the location of the image.

The array entry is as follows:

col1: 'Bert', col2: 'Muppet', col3: 'Sesame Street', imgUrl: 'http://images3.wikia.nocookie.net/__cb20101210195428/muppet/images/4/40/Bert1970s.jpg'

The HTML presented is as follows:

<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 jump to the image location as I expect. Can someone help me here and point out what I am missing. In addition, note, I also tried to add click: function(){ return true; } click: function(){ return true; } , and that didn't help either. Thanks in advance, and the demo can be found here: http://dev.voidbase.com/working.html

+6
source share
1 answer

You are on the right track with

Also, note, I also tried to add click: function(){ return true; } click: function(){ return true; } , and that didn't help either.

But by itself click: function(){ return true; } click: function(){ return true; } not enough because the click event will still bubble, so you need to use the clickBubble: false option (see also 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>

JSFiddle demo.

By the way, binding your click to the body element "steals" your click event: <body style="padding-top: 100px;" data-bind="click: modalKiller"> <body style="padding-top: 100px;" data-bind="click: modalKiller"> . Therefore, if return true from your modalKiller handler, it also fixes your problem.

+10
source

Source: https://habr.com/ru/post/952405/

More articles:


All Articles