Question

我有几个div标签，希望能够用jquery创建另一个div标签（点击#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');
    });
});

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

Answer 1

//$("#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();
});

Answer 2

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

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

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

此处提供更多信息：http://api.jquery.com/event.stopPropagation/

Answer 3

'body：not（#four）'并不代表你认为的含义。这意味着任何没有id为'four'的body元素。

正在发生的事情是点击事件首先触发你的'四'div然后气泡到身体（没有id四），其点击事件然后淡出'五'。

jquery立即淡出而不是.on（'click'）

3 个答案: