Knockout.js动态链接不会点击

Question

Knockout.js动态链接不会点击

Lis*_*a-J 6 html javascript css jquery knockout.js

我正在开发一个使用knockout js的新项目.我已经设置了一个小表,显示图像和信息输入到填充可观察数组的表单中.我有用锚(链接)标签包裹的图像,我通过KO数据绑定输入href.见下文.

<a data-bind="attr: {href: imgUrl}" target="_blank"><img class="imgThumb" data-bind="attr: {src: imgUrl}"/></a>

所有这些都按预期显示,但是没有链接实际上会点击到图像位置.

数组条目如下所示:

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

Answer 1

nem*_*esv 12

你正走在正确的轨道上

此外,值得注意的是,我也试过添加一个click: function(){ return true; },但也没有帮助.

但这本身click: function(){ return true; }并不足够,因为click事件仍然会冒出来,所以你需要使用该clickBubble: false选项(参见文档中):

<a target="_blank" data-bind="attr: {href: imgUrl}, 
      click: function() { return true;}, clickBubble: false">
    <img class="imgThumb" data-bind="attr: {src: imgUrl}"/>
</a>

Run Code Online (Sandbox Code Playgroud)

演示JSFiddle.

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

归档时间：	12 年，3 月前
查看次数：	5973 次
最近记录：	12 年，3 月前