如何解决jQuery 不适用于动态元素，但在控制台中工作正常
我正在使用插件在我的网站上显示来自 Instagram 的图像。当我尝试将 jQuery（任何 jQuery，即 $('.instagram_gallery').css('display','none')）应用于由插件创建的任何元素时，它在控制台中工作，但在代码中无效。我知道在加载 DOM 之前，jQuery 看不到此代码。但问题是没有一个解决方案有效 - 我尝试了 $(document).ready(function() {}) 和 $(window).on('load',function(){})。
你可以在这个网站上看到插件（Instagram画廊部分）：10oz.ru/mlight
<?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);
解决方法
您是正确的，您需要在新图像添加到 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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。