javascript – Knockout.js动态链接不点击

前端之家收集整理的这篇文章主要介绍了javascript – Knockout.js动态链接不点击前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在开发一个使用knockout js的新项目.我已经设置了一个小表,显示图像和信息输入到填充可观察数组的表单中.我有用锚(链接)标签包裹的图像,我通过KO数据绑定输入href.见下文.

< a data-bind =“attr:{href:imgUrl}”target =“_ blank”>< img class =“imgThumb”data-bind =“attr:{src:imgUrl}”/>< /一个> 所有这些都按预期显示,但是没有链接实际上会点击到图像位置. 数组条目如下所示: col1:’Bert’,col2:’Muppet’,col3:’Sesame Street’,imgUrl:’http://images3.wikia.nocookie.net/__cb20101210195428/muppet/images/4/40/Bert1970s.jpg’ 呈现的HTML如下所示:

< 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> 再一次,我的链接都不起作用,他们不会像我期望的那样点击图像位置.任何人都可以帮助我,并指出我错过了什么.另外值得注意的是,我尝试添加一个click:function(){return true;同样,这也没有帮助.在此先感谢,可在此处找到演示:http://dev.voidbase.com/working.html

解决方法

你正走在正确的轨道上

Also,of note,I have tried adding a click: function(){ return true; } as well,and that didn’t help either.

但本身就是click:function(){return true;因为click事件仍然会冒泡,所以你需要使用clickBubble:false选项(参见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.

顺便说一句,你对body元素的点击绑定“窃取”你的点击事件:< body style =“padding-top:100px;” data-bind =“click:modalKiller”>.因此,如果从modalKiller处理程序返回true,它也可以解决您的问题.

猜你在找的JavaScript相关文章