Question

我有一个网站通过Ajax加载其主要内容，但是我遇到了加载所述内容中的任何插件/短代码的问题。如果我通过url bar直接加载每个页面，插件可以正常工作。

Ajax代码

jQuery(document).ready(function() {
    var History = window.History;
    if (!History.enabled) {
        return false;
    }

    // Bind to StateChange Event
    History.Adapter.bind(window,'statechange',function(){ 
      var State = History.getState(); 
      //History.log(State.data, State.title, State.url);
      var goto_url = State.url;   
      jQuery('.content').load(goto_url+ ' #main').hide().delay(750).fadeIn(1000); 
    });

    jQuery('.main-menu a').click(function(evt){
        var href = jQuery(this).attr('href');
        History.pushState({}, '', href);

        var elementClassName = jQuery(this).attr('class');
        jQuery('.main-menu a').removeClass('active');
        jQuery('.main-menu a.'+elementClassName).addClass('active');

        jQuery('.content').load(href+ ' #main',
            function() { 
                jQuery(this).fadeIn(750);
            });
         return false;
    });
});

我希望运行特定于页面的短代码。

<?php echo do_shortcode('[shortcode goes here]'); ?>

通过ajax加载相应的页面后。我相信正确的解决方案是在加载函数回调中运行脚本，但我不知道如何使用短代码执行此操作。如果需要，我可以通过每个短代码调用函数。

示例短代码功能

jQuery(document).ready(function($){ window.dzsp_init("#port0",{
settings_slideshowTime:3
,settings_mode: "masonry"
,title: ""
,design_item_width: ""
,design_item_height: ""
,design_categories_style: "normal"
,design_categories_pos: "top"
,design_pageContent_pos: "top"
,settings_disableCats: "off"
,settings_lightboxlibrary: "zoombox"
,settings_preloadall: "off"
,audioplayer_swflocation: "http://sbmdesigns.net/wp-content/plugins/dzs-portfolio/ap.swf"
,videoplayer_swflocation: "http://sbmdesigns.net/wp-content/plugins/dzs-portfolio/preview.swf"
,disable_itemmeta: "off"
,settings_ajax_loadmoremethod: "button"
,settings_mode_masonry_layout: "masonry"
,design_total_height_full: "off"
,settings_mode_masonry_layout_straightacross_setitemsoncenter: "off"
,design_item_height_same_as_width : "off"})
});

Answer 1

不是最优雅的解决方案，但根据您尝试重新初始化的插件/短代码，您可以使用适当的jQuery初始化为.load回调中的许多人执行此操作。

$( "#result" ).load( "ajax/test.html", function() { /*put re-init code here*/ });

例如对于flex滑块：

jQuery('.slider-<?php echo $slider->ID; ?>').flexslider({
                                      animation: "<?php echo $animation; ?>",
                                      easing: "swing",
                                      direction: "<?php echo $direction; ?>",
                                      slideshowSpeed: "<?php echo $slideshow_speed; ?>",
                                      animationSpeed: "<?php echo $animation_speed; ?>",
                                      controlNav: <?php echo $control_nav; ?>,               
                                      directionNav: <?php echo $directional_nav; ?>,  
                                      pauseOnAction: <?php echo $action; ?>,
                                      pauseOnHover: <?php echo $hover; ?>,
                                      useCSS: false
                                          });

或者要复制音频短代码，您可以执行以下操作（使用先前在functions.php中排队的正确脚本）：

$('.asset-audio').mediaelementplayer({videoHeight: 30,  videoWidth: 0, alwaysShowControls: true,
    features: ['playpause','progress','current','duration','volume'],
});

在Ajax加载后启动Wordpress插件/短代码

1 个答案: