.remove() doesn't achieve desired effect

Question

I'm trying to write a lightbox script, which can open images when clicked. As you can see in the fiddle, that part works. But closing the image by clicking the lightbox in order to execute the function .remove() doesn't quite work out. Why is that?

$(".discuss-entry img").each(function() {
    var image = $(this);
    var src = image.attr("src");
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    var imageWidth = image.outerWidth();
    var imageHeight = image.outerHeight();

    var left = ((windowWidth-imageWidth)/2)
    var top = ((windowHeight-imageHeight)/2)

    if(image.closest("a")[0]===undefined) {
        image.on("click",function(){
            $("<div class='lightbox'><img src='"+src+"' style='top: "+top+"px; left: "+left+"px' /></div>").appendTo("body");
        });
        $(".lightbox").on("click", "img", function() {
            $(this).remove();
        });
    }
});

possible duplicate of [jQuery click not working for dynamically created items](http://stackoverflow.com/questions/9484295/jquery-click-not-working-for-dynamically-created-items) — JJJ, Feb 27 '15 at 22:21
Also, you'll probably want to call `$(".lightbox").remove();` instead of `this` which refers to the image only. — JJJ, Feb 27 '15 at 22:23
Try attaching youre click handler to the element that you're appending to(body) rather than attaching to .light box: $("div.lightbox img").click(REMOVE).append to(body) — Andrew Hewitt, Feb 27 '15 at 22:24
http://mycodefixes.blogspot.hu/2011/01/jquery-binding-events-to-dynamic-dom.html here is the reason — eapo, Feb 27 '15 at 22:27
@Juhana it's not a duplicate, since i've already use the solution of that question — Simon Mathewson, Feb 27 '15 at 22:37
No you haven't. You're still binding the event to the dynamically created element, not its static parent. — JJJ, Feb 27 '15 at 22:49
mentally walk through when element gets added and when you bind the event handler. Since `lightbox` doesn't get added until ***after*** user triggered event and you add event handler before the user triggered event, element doesn't exist when you are binding the new click handler — charlietfl, Feb 27 '15 at 23:08

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

You are selecting .lightbox before it's created, you should select and add the event once it's created, like this

JavaScript

$(".discuss-entry img").each(function() {
    var image = $(this);
    var src = image.attr("src");
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    var imageWidth = image.outerWidth();
    var imageHeight = image.outerHeight();
    
    var left = ((windowWidth-imageWidth)/2)
    var top = ((windowHeight-imageHeight)/2)
    
    if(image.closest("a")[0]===undefined) {
        image.on("click",function(){
            $("<div class='lightbox'><img src='"+src+"' style='top: "+top+"px; left: "+left+"px' /></div>").appendTo("body");
            $(".lightbox").on("click", function() {
                $(this).remove();
            });
        });
        
    }
});

Also I changed .on("click","img"..) for .on("click"..) so that it removes the complete lightbox and not just the image, but feel free to change that back.

Hope it helps!

score -2 · Answer 2 · answered Feb 27 '15 at 22:29

-2

Try putting that event into an onclick on your lightbox div:

if(image.closest("a")[0]===undefined) {
    image.on("click",function(){
        $("<div class='lightbox' onclick='$(this).remove()' ><img src='"+src+"' style='top: "+top+"px; left: "+left+"px' /></div>").appendTo("body");
    });
}

http://jsfiddle.net/L11h2b50/10/

answered Feb 27 '15 at 22:29

Ashton French

190
8

1

why mix unobtrusive and inline script? Defeats the purpose of using unobtrusive script in the first place. Event delegation is a better solution – charlietfl Feb 27 '15 at 23:13

.remove() doesn't achieve desired effect

2 Answers2

JavaScript