jquery - 使颜色框链接出现在更改 html 内容的鼠标悬停上

Question

我有一个链接（比如，A），一旦侧边导航栏上的一个选项悬停在上面，它就会变成另一个链接（B）。单击链接 A 时，彩盒效果很好。但是，当单击 B 时（鼠标悬停后）效果消失。

为了将问题分解为基本问题，我在下面输入了一些代码：

<script>
        jQuery(document).ready(function () {
            $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
        });
</script>
<script type="text/javascript" language="javascript">
function changeCode()
{
    $(".content").html('<p>Link B:<a class="iframe" href="http://www.google.com">Google</a></p>');

}
</script>
...
<li onMouseover="changeCode();"><a href="index.html">Home</a></li> 
...
<div class="content">
        <p>Link A:<a class="iframe" href="http://www.google.com">Google</a></p>
</div>

感谢任何可以提供一些建议的人。

Answer 1

这是事件委托的问题。您正在将颜色框绑定到准备好的 DOM 上的元素，但是，您正在删除原始元素。最简单的方法是简单地更改元素的一些属性，而不是完全删除它。

$(".content").find('p').text('Link B').addBack().find('.iframe').prop('href', 'http://newsite.com');