JQuery не работает для динамических элементов, но отлично работает в консоли

Я использую плагин, который отображает изображения из Instagram на моем сайте. Когда я пытаюсь применить jQuery (любой jQuery, т.е. $('.instagram_gallery').css('display', 'none')) для любого элемента, созданного плагином, он работает в консоли, но не в коде. Я понимаю, что jQuery не видит этот код, пока DOM не загружен. Но проблема в том, что ни одно из решений не работает — я пробовал и $(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);

jquery dynamic instagram

26.12.2020 17:46

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

121

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы правы в том, что вам нужно запустить свой код после того, как новые изображения были добавлены в DOM. Исходя из вашего описания, вы используете эту библиотеку jQuery Instagram, тогда вы можете использовать свойство 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>

Спасибо, это плагин, который я использую. Не могли бы вы помочь мне добавить настройки из json в вашу конструкцию, как это должно выглядеть? <script> jQuery($ => { $.instagramFeed({ callback: () => { $('.instagram_gallery').hide(); // note use of hide() instead of css() }, ($settings_json) }); }); </script>

— 26.12.2020 19:24

26.12.2020 18:01