gpt4 book ai didi

javascript - Knockout.js 动态链接点击不通过

转载 作者:太空狗 更新时间:2023-10-29 14:47:25 24 4
gpt4 key购买 nike

我正在开发一个使用 knockout js 的新元素。我设置了一个小表,显示输入到填充可观察数组的表单中的图像和信息。我用 anchor (链接)标签包裹了图像,我正在通过 KO 数据绑定(bind)在 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

最佳答案

你在正确的轨道上

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 元素上的点击绑定(bind)“窃取”了您的点击事件:<body style="padding-top: 100px;" data-bind="click: modalKiller"> .所以如果返回 true来自你的 modalKiller处理程序它也解决了你的问题。

关于javascript - Knockout.js 动态链接点击不通过,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18414398/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com