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

如果选择＆＃34;＆＃34;你的意思是文本选择，然后这样做：

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;
}

Answer 2

我设法用一种“黑客”来解决它......

$("#cover").after($('<a style="display: hidden; position: absolute;" id="hack"></a>'));

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

在动态添加元素时，JQuery fadeToggle奇怪的副作用

2 个答案: