How to store a dynamically generated element in a variable?

Question

Suppose that I use AJAX to dynamically inject a gallery of images into a page. Note that I don't just inject the images, but the whole gallery's markup, like this:

<div id="gallery">
    <img src="image-1.jpg" />
    <img src="image-2.jpg" /> 
    <img src="image-3.jpg" /> 
</div>

The following code wouldn't work, because on document ready the gallery is not there yet, so the gallery variable that I call on click is actually empty, right?

$( document ).ready( function() {

    var gallery = $( '#gallery' );

    $( '#button' ).on( 'click', function() {
        gallery.css( 'display', 'block' );
    });

});

My question is: is there a way to use a variable as if it was a placeholder for an element that is dynamically generated at a later moment, like in the above code?

Why not use `$('#gallery').css( 'display', 'block' );` inside the click event handler? — adiga, Oct 12 '17 at 09:11
I could, but the above is only simplified code. There's actually many things I have to cover, like lazy loading images, moving back and forth from one image to the other, etc. Using variables would make my life easier! — grazdev, Oct 12 '17 at 09:16
is the ajax inside the same `$(document).ready()`? if yes, you could do `gallery = $('#gallery' );` after the `gallery` div is populated — adiga, Oct 12 '17 at 09:19
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Owen Pauling, Oct 12 '17 at 11:56
@MehdiBouzidi I think what I wanted to do can't be done, as one of the answers below confirmed. I've actually just marked it as the correct answer. — grazdev, Oct 13 '17 at 15:32

score 0 · Answer 1 · answered Oct 12 '17 at 09:19

use $(document.getElementById('gallery')); to get the gallery, cause the gallery was not loaded the first time with the DOM, so you can't select it with simple jQuery selector.

Here is a code snippet demo:

$("body").append('<div id="gallery"><img src="image-1.jpg" />    <img src="image-2.jpg" />     <img src="image-3.jpg" /> </div>');

    $( '#button' ).on( 'click', function() {
     var gallery=$(document.getElementById('gallery'));
        gallery.css( 'border-color', 'red' );
    });

#gallery{
width=100px;
height=100px;
 border-style: solid;
    border-width: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="button">Click</button>

score 0 · Accepted Answer · answered Oct 12 '17 at 09:34

No.

var gallery = $( '#gallery' ); means that jQuery will find and select an element with id="gallery" which is exist in your DOM at that very moment, then it'll be stored in gallery variable.

But you can make it work if you do like this:

$(document).ready(function() {

    var gallery = '#gallery';

    $('#button').on('click', function() {
        $(gallery).css( 'display', 'block' );
    });

});

because, initially gallery variable only store a string "#gallery", then later jQuery will find $(gallery) which is mean $('#gallery').

I thought this was not possible, but was worth asking :) – grazdev Oct 12 '17 at 12:47 — grazdev, Oct 12 '17 at 12:47

How to store a dynamically generated element in a variable?

2 Answers2