1

我有几个 div 标签，希望能够用 jquery 创建另一个标签（点击 #four），然后将其淡入，然后在另一次点击时淡出。

<body>
<div id="one">one</div>
<div id="two">two</div>
<div id="four">four</div>
</body>

但是我的代码立即淡出#five，尽管我试图为fadeOut选择.on（'click'），但与fadeIn（'#four'）相同的区域

$(document).ready(function() {
$("#four").on('click',function() {
    var newbox = $('<div id="five">five</div>');
    $(newbox).hide().insertAfter("#four").fadeIn('slow');
    });
})

$(document).ready(function() {
$('body:not(#four)').on('click', function() {
$("#five").fadeOut('slow');
    });
});

知道我错在哪里了吗？谢谢，菲利普

4

3 回答 3

2

您的点击事件正在向上传播 DOM 树并在主体上触发。因此，您的单击事件实际上会触发两者。

将选择器更改为：div:not(#four)

这是一个工作 jsFiddle 的链接：http: //jsfiddle.net/QkMmx/

更多信息在这里：http ://api.jquery.com/event.stopPropagation/

于 2013-07-19T16:33:15.813 回答
2 
//$("#four").on('click',function() { //the user can creat as many div as he wants
$("#four").one('click',function() { //the user fire this event only once
 var newbox = $('<div id="five">five</div>');
 newbox.on('click', function(){ 
   $(this).fadeOut();
 });
 newbox.hide().insertAfter("#four").fadeIn('slow');
});
})

如果您声明不需要再次使用，newbox因为您已经选择了它。$("<tags>")$(newbox)

其他解决方案是delegate event

$(document).on('click', function(e){
   if($(e.target).attr('id') === 'four') return false;
   $("#five").fadeOut();
});
于 2013-07-19T16:28:45.130 回答
0

'body:not(#four)' 并不意味着你认为它的意思。这意味着任何没有 id 'four' 的 body 元素。

发生的事情是单击事件首先在您的“四个”div 上触发，然后冒泡到主体（没有 id 四个），然后其单击事件淡出“五个”。

于 2013-07-19T16:33:45.253 回答