javascript - JQuery fadeToggle 在动态添加的元素上出现奇怪的副作用

Question

fadeToggle 在静态 HTML 元素上工作正常:HTML:

<div id="wrapper" style="
position: relative;
display: inline-block;
width: 116px;
height: 116px;
background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Example.jpg/116px-Example.jpg') no-repeat;
">
<img id="cover" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Example.png/116px-Example.png" />
</div>

JQUERY:

$("#wrapper").click(function() {
    $("#cover").fadeToggle("slow");
});

http://jsfiddle.net/BishKopt/zFq5P/1/

但是当我尝试使用 JQuery 添加包装器时...

HTML:

<img id="cover" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Example.png/116px-Example.png" />

JQUERY:

$wrapper = $('<div></div>');
$wrapper.attr('id', 'mywrapper');
$wrapper.css({
    position: "relative",
    display: "inline-block",
    width: $("#cover").width(),
    height: $("#cover").height(),
    background: "url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Example.jpg/116px-Example.jpg') no-repeat"
});
$("#cover").wrap($wrapper);

$("#mywrapper").click(function() {
    $("#cover").fadeToggle("slow");
});

http://jsfiddle.net/BishKopt/kazKF/1/

...在第二次切换(第二次单击)后 - img html 元素被“选中”...您有什么想法可以避免吗？谢谢!

Answer 1

如果“选择”是指文本选择，那么请执行以下操作:

CSS:

#mywrapper{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

但是，如果您的意思是您的浏览器在 div 周围添加了不需要的边框，那么请执行以下操作:

CSS:

#mywrapper{
    outline:none;
}