I've been working on a new project that utilizes knockout js. The main issue I'm facing is with setting up a table to display images and information from a form, being stored in an observable array. Each image is wrapped in an anchor tag, and the href attribute is assigned dynamically using KO data-bind. Here's the code snippet:
<a data-bind="attr: {href: imgUrl}" target="_blank"><img class="imgThumb" data-bind="attr: {src: imgUrl}"/></a>Although everything seems to be displaying correctly, none of the links seem to be working when clicked.
An example entry in the array looks like this:
col1: 'Bert', col2: 'Muppet', col3: 'Sesame Street', imgUrl: 'http://images3.wikia.nocookie.net/__cb20101210195428/muppet/images/4/40/Bert1970s.jpg'The HTML output from this entry appears 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>Despite my efforts, none of the links are functional and do not redirect to the specified image location. Can someone provide guidance on what might be missing? I did try adding
click: function(){ return true; }