CODEWITHSUNDEEP
javascriptjquery
H.HISTORY
H.HISTORY

Reputation: 518

jQuery: remove or hide overlay div?

I'm creating an overlay div using the following code when an image thumbnail is clicked:

<script type="text/javascript">
jQuery(document).ready(function(){


    jQuery(".test-popup-link").click(function(e) {

       var overlay = jQuery('<div align="center" id="overlay"><img id="imgBig" src="" /></div>');
overlay.appendTo(document.body);
//jQuery('#overlay').load(this.href);

var imgs = (this.href);

jQuery('#overlay #imgBig').attr("src", imgs)
        return false;
    });




});


</script>

This works fine.

Now i need to remove or hide the overlay div when the user clicks on the img with the id of imgBig. so I tried this:

    <script>
    jQuery(document).ready(function(){

            jQuery( "#overlay #imgBig" ).click(function() {
      jQuery("#overlay").remove();
    });

    return false;
            });

</script>

but for some reason it just doesn't work which means it doesn't hide/remove the overlay div!

Could someone please advise on this issue?

Thanks in advance.

Upvotes: 0

Views: 4547

Answers (4)

kittenchief
kittenchief

Reputation: 1255

The problem is that the on() or the click() function doesn't work with dynamically generated HTML content. Previously you could use the live() method but currently it's deprecated in jQuery. Fortunately, the on() method accepts a second argument especially for these cases. So you can use:

jQuery( "body" ).on( 'click', '#imgBig', function() {
  jQuery("#overlay").remove();
});

Here's a Fiddle: http://jsfiddle.net/y5y1x5vm/

Hope that solves your problem.

Upvotes: 0

guest271314
guest271314

Reputation: 1

Now i need to remove or hide the overlay div when the user clicks on the img with the id of imgBig

Try assigning click event to img element having src set to imgs

jQuery(document).ready(function(){


  jQuery(".test-popup-link").click(function(e) {

    var overlay = jQuery('<div align="center" id="overlay"><img id="imgBig" src="" /></div>');

    overlay.appendTo(document.body);
    //jQuery('#overlay').load(this.href);

    var imgs = (this.href);

    jQuery('#overlay #imgBig').attr("src", imgs);
    // assign `click` event to `img` element having `src` set to `imgs`
    jQuery("img[src=" + imgs + "]").on("click", function() {
      // do stuff
      // e.g., remove or hide the overlay div
      $(this).parent().remove();

    });

    return false;
  });

});

Upvotes: 0

Tariq
Tariq

Reputation: 2871

You should use the second part inside the first function, like this (I replaced Jquery with $):

...  
var imgs = (this.href);

    $('#overlay #imgBig').attr("src", imgs);


    $( "#overlay #imgBig" ).click(function() {
        $("#overlay").remove();
    });
    return false;

A JSFiddle example: JSFiddle

Upvotes: 0

Stacey Burns
Stacey Burns

Reputation: 1092

The click function doesn't work with dynamically created elements. Also, id's are unique so you should only need to use #imgBig in the selector.

Try this:

jQuery(document).ready(function(){

        jQuery( "#imgBig" ).on('click', function() {
            jQuery("#overlay").remove();
        });

           return false;
});

Upvotes: 1

Related Questions