如何在变量中存储动态生成的元素？

Question

假设我使用AJAX动态地将图像库插入页面。请注意，我不只是注入图像，而是整个图库的标记，如下所示：

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

以下代码不起作用，因为在文档就绪时，库尚未存在，因此我在click上调用的gallery变量实际上是空的，对吧？

$( document ).ready( function() {

    var gallery = $( '#gallery' );

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

});

我的问题是：有没有办法使用变量，好像它是一个占位符，用于稍后动态生成的元素，就像上面的代码一样？

Answer 1

使用$(document.getElementById('gallery'));来获取图库，因为第一次使用 DOM 未加载图库，因此您无法使用简单的 jQuery <选择它/ em> selector。

以下是代码段演示：

＆＃13;

＆＃13;

$("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' );
    });

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

没有

usr/include/python2.7表示jQuery 会找到并选择当前存在于您的DOM中的var gallery = $( '#gallery' );元素，然后将其存储在id="gallery"变量。

但如果你这样做，你可以让它发挥作用：

gallery

因为，最初$(document).ready(function() { var gallery = '#gallery'; $('#button').on('click', function() { $(gallery).css( 'display', 'block' ); }); }); 变量只存储字符串gallery，然后jQuery会找到"#gallery"，这意味着$(gallery)。