jQuery 不适用于动态元素，但在控制台中工作正常

Question

我正在使用在我的网站上显示来自 Instagram 的图片的插件。当我尝试为插件创建的任何元素应用 jQuery（任何 jQuery 即 $('.instagram_gallery').css('display', 'none')）时，它在控制台中有效，但在代码中无效。我知道 jQuery 在加载 DOM 之前看不到此代码。但问题是 none 的解决方案有效 - 我尝试了 $(document).ready(function() {}) 和 $(window).on('load', function(){})。

您可以在本网站（Instagram 图库部分）看到插件：10oz。ru/mlight

带有设置的文件，我试图在其中添加 jQuery:

    <?php
class shopInstafeedPlugin extends shopPlugin
{    public static function display()
    {
        $plugin = wa('shop')->getPlugin('instafeed');
        $settings = $plugin->getSettings();
        $settings_json = json_encode($plugin->getSettings());
        $root = $plugin->getPluginStaticUrl();
        $html = <<<HTML
        <div id='instafeed'></div>
        <script src="{$root}js/jquery.instagramFeed.min.js"></script> 
        <script>
             (function($){
                $(window).on('load', function(){
                    $.instagramFeed($settings_json); 
             });
             })(jQuery);   
        </script>
<style>
HTML;
        if (!$settings['styling']) {
            $html .= $settings['css'];
        }
        return $html;
    }
}

最后这段代码对我有用：

var settings = $settings_json;
    var callback = {callback: function (data){
       $('.instagram_gallery').hide();                
    }};
    jQuery.extend(settings, callback);
    (function($){
        $(window).on('load', function() {
            $.instagramFeed(settings);
        });
    }) 
    (jQuery);

Answer 1

您是正确的，因为您需要运行您的代码在新图像添加到 DOM 之后。根据您的描述，假设您使用的是 this jQuery Instagram library，那么您可以使用 callback 属性来实现：

<script src="{$root}js/jquery.instagramFeed.min.js"></script>
<script>
  jQuery($ => {
    $.instagramFeed({
      callback: () => {
        $('.instagram_gallery').hide(); // note use of hide() instead of css()
      },
      // your other settings in this object...
    });
  });
</script>

jQuery 不适用于动态元素，但在控制台中工作正常

jQuery doesn't work for dynamic elements but works fine in console

jquery

dynamic

instagram