jQuery, do not select 'child' element

Question

jQuery, do not select 'child' element

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

3

I have this code that makes a kind of fancybox, it turns out well but I liked that the click on the image did not make the '#overlayFancy' disappear, it was good that only the click outside the image is to make it disappear with everything , although the image is within '#overlayFancy' that occupies 100% * 100% of the window and the image is in the middle of the window, 500px * 500px.

HTML:

<div class="wrapperExtraImg" style="background-image:url(<?php echo 'admin/' .$extraImg->extra_image_path; ?>)"></div>
<div id="overlayFancy"></div>

js: Zoom In

$(document).on('click', '.wrapperExtraImg' ,function(){
        var image = $(this).attr('id');
        $('#overlayFancy').stop().animate({
            "opacity":"1"
        }, 500);
        $( "#overlayFancy" ).append( "<img src="+image+">" );
});

js: Disappear, return to page default

$(document).on('click', '#overlayFancy' ,function(){
        $('#overlayFancy').stop().animate({
            "opacity":"0",
        }, 300);
        $('#overlayFancy').children('img').remove();
    });

jquery seletores

asked by anonymous 29.08.2014 / 12:58

3 answers

1

instead of using.

$('#overlayFancy').children('img').remove();

use

$('#overlayFancy').html('');

or

$('#overlayFancy').find('img').remove();

29.08.2014 / 15:07

0

The problem is that children () returns a list (which can be 1) children, so possibly what you want is first () or something like that, for your text, I do not know if hide ) and show () are no better than append () and remove ()

29.08.2014 / 16:55

Problem with Linq in Lambda: LINQ to Entities does not recognize ... get_Item (Int32). How to solve? Default directory for opening the prompt in Node.js

score 1 · Accepted Answer

The easiest way is to listen to the click on the image and prevent propagation, like this:

jquery:

$(document).on('click', '.wrapperExtraImg', function () {
    $("#overlayFancy").append("<img src=" + $(this).attr('id') + ">").stop().fadeIn(500);
});


$(document).on('click', '#overlayFancy img', function (event) {
    event.stopPropagation();
});

$(document).on('click', '#overlayFancy', function () {
    $('#overlayFancy').stop().fadeOut(300, function () {
        $(this).find('img').remove();
    });
});

See working on JSFiddle