CODEWITHSUNDEEP
jqueryfadeout
user1661677
user1661677

Reputation: 1272

.fadeOut() not working

I'm having a problem with my .fadeOut() not working when a user clicks "No", and I know it's because div.confirm is embedded within the span, which is where the .fadeIn() function is called.

I'm working on a project that requires this HTML hierarchy, but I need the "No" button to .fadeOut() the confirmation box.

Non-working Fiddle

My HTML:

<span>Delete File
<div class="confirm">Are you sure?
  <div class="yes">
   Yes
  </div>
  <div class="no">
   No
  </div>
</div>
</span>

JS:

$('span').click(function () {
    $('.confirm').fadeIn(100);
});

$('.no').click(function () {
    $('.confirm').fadeOut(100);
})

Upvotes: 2

Views: 3222

Answers (2)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

you need to use e.stopPropagation();

$('span').click(function () {
    $('.confirm').fadeIn(100);
});

$('.no').click(function (e) {
    e.stopPropagation();
    $('.confirm').fadeOut(100);
});

Working Demo

And , to be more clear if you have more than one span you can use

$('span').click(function () {
    $(this).find('.confirm').fadeIn(100);
});

$('.no').click(function (e) {
    e.stopPropagation();
    $(this).closest('.confirm').fadeOut(100);
})

Working Demo

Upvotes: 5

PyriteWolf
PyriteWolf

Reputation: 46

A simple solution is moving the .confirm div outside the span - it should prevent the firing of the span's event and still work just fine.

Yey-working fiddle

<span>Delete File</span>
 <div class="confirm">Are you sure?
  <div class="yes">
  Yes
  </div>
  <div class="no">
  No
  </div>
 </div>

Upvotes: 3

Related Questions