jQuery one('load','selector'),选择器不起作用

时间:2015-04-16 15:02:16

标签: javascript jquery events jssor

我希望在Ajax加载后使用以下一个加载。

这是有效的:

j('#slider_small_container .slider-image-small:eq(0)').one('load',function(){ 
    alert('Test');  
});  

但这不是:

j('body').one('load', '#slider_small_container .slider-image-small:eq(0)',function(){   
    alert('Test');  
});  

为什么会这样?

正如您所看到的,我首先从一个accordeon开始,它在点击时从子页面加载(ajax)内容。 在负载加载之后,我做了一些其他的事情,比如嵌套的accordeon,gallery等等。

在最后的孔编写脚本后,我想使用图像滑块。

但相应的图像来自ajax加载。 如果我直接打开子页面它的工作原理。 但如果它用ajax加载,则事件不会触发。

jQuery(function(j){

    /**
     * Accordion Big
     */
    j('.csc-menu-accordion.csc-menu-accordion-big').accordion({
        header: ".ui-accordion-header.big",
        icons: false,
        collapsible: true,
        active: false,
        heightStyle: 'content',
        activate: function( event, ui ) {
            uid = (ui.newHeader.data('uid')) ? ui.newHeader.data('uid') : ui.oldHeader.data('uid');
            closed_big = (ui.newHeader.data('uid')) ? false : true;
            // Load
            if( ui.newPanel.data('loaded') == false ){
                ui.newPanel.load(config_baseurl + 'index.php?id=' + uid, function(){
                    // Set loaded state
                    ui.newPanel.data('loaded',true);
                    // Set Location if unequal
                    // 3D-Modul
                    j.each(ui.newPanel.find('.csc-textpic-imagerow'), function(a){
                        j(this).addClass('csc-textpic-imagerow'+'-'+a).data('index',a);
                    });
                    ui.newPanel.find('.csc-textpic-imagerow:first').addClass('active');
                    ui.newPanel.find('.csc-frame-3d-modul').data('lastactive',0);
                    ui.newPanel.find('.bt-3d-modul').on('click', function(){
                        lastactive = ui.newPanel.find('.csc-frame-3d-modul').data('lastactive');
                        next = (ui.newPanel.find('.csc-textpic-imagerow:eq('+lastactive+1+')').length>0) ? ui.newPanel.find('.csc-textpic-imagerow:eq('+lastactive+1+')') : ui.newPanel.find('.csc-textpic-imagerow:eq(0)');
                        ui.newPanel.find('.csc-textpic-imagerow:eq('+lastactive+')').removeClass('active');
                        next.addClass('active');
                        ui.newPanel.find('.csc-frame-3d-modul').data('lastactive',next.data('index'));
                    });
                    // Accordion
                    j('.obj_accordion_tech_data').accordion({
                        header: "a",
                        icons: false,
                        collapsible: true,
                        active: false,
                        heightStyle: content
                    });
                    // Media Gallery
                    mediaGalleryEqualHeights();
                    j(window).bind('resize', mediaGalleryEqualHeights);
                    mediaGallery();


                    /**
                     * Accordion Small
                     */
                    j('.csc-menu-accordion.csc-menu-accordion-small').accordion({
                        header: ".ui-accordion-header.small",
                        icons: false,
                        collapsible: true,
                        active: false,
                        heightStyle: 'content',
                        activate: function( event, ui ) {
                            uid = (ui.newHeader.data('uid')) ? ui.newHeader.data('uid') : ui.oldHeader.data('uid');
                            closed_small = (ui.newHeader.data('uid')) ? false : true;
                            // Load
                            dbg('small');
                            if( ui.newPanel.data('loaded') == false ){
                                ui.newPanel.load(config_baseurl + 'index.php?id=' + uid, function(){
                                    // Set loaded state
                                    ui.newPanel.data('loaded',true);
                                    // Set Location if unequal
                                    // 3D-Modul
                                    j.each(ui.newPanel.find('.csc-textpic-imagerow'), function(a){
                                        j(this).addClass('csc-textpic-imagerow'+'-'+a).data('index',a);
                                    });
                                    ui.newPanel.find('.csc-textpic-imagerow:first').addClass('active');
                                    ui.newPanel.find('.csc-frame-3d-modul').data('lastactive',0);
                                    ui.newPanel.find('.bt-3d-modul').on('click', function(){
                                        lastactive = ui.newPanel.find('.csc-frame-3d-modul').data('lastactive');
                                        next = (ui.newPanel.find('.csc-textpic-imagerow:eq('+lastactive+1+')').length>0) ? ui.newPanel.find('.csc-textpic-imagerow:eq('+lastactive+1+')') : ui.newPanel.find('.csc-textpic-imagerow:eq(0)');
                                        ui.newPanel.find('.csc-textpic-imagerow:eq('+lastactive+')').removeClass('active');
                                        next.addClass('active');
                                        ui.newPanel.find('.csc-frame-3d-modul').data('lastactive',next.data('index'));
                                    });
                                    // Accordion
                                    j('.obj_accordion_tech_data').accordion({
                                        header: "a",
                                        icons: false,
                                        collapsible: true,
                                        active: false,
                                        heightStyle: content
                                    });

                                    setTimeout( "jQuery('html, body').scrollTop(jQuery('#c'+uid).offset().top);",1000 );
                                    checkLocation();
                                    checkLocationReset();
                                });
                            }else{
                                checkLocation();
                                checkLocationReset();
                            }

                            // Set scroll data
                            if(ui.newHeader.hasClass('ui-state-active')){
                                j('.obj_totop').data('scrolltosmall','#'+ui.newHeader.attr('id'));
                            }else{
                                j('.obj_totop').removeData('scrolltosmall');
                            }
                        }
                    });

                    setTimeout( "jQuery('html, body').scrollTop(jQuery('#c'+uid).offset().top);",1000 );
                    checkLocation();
                    checkLocationReset();
                });
            }else{
                checkLocation();
                checkLocationReset();
            }

            // Set scroll data
            if(ui.newHeader.hasClass('ui-state-active')){
                j('.obj_totop').data('scrolltobig','#'+ui.newHeader.attr('id'));
            }else{
                j('.obj_totop').removeData('scrolltobig');
            }
        }
    });

    /**
     * Function checkLocation
     */
    function checkLocation(){
        if(window.location.hash !== '#c' + uid) {
            window.location.hash = 'c' + uid;
        }
    }

    /**
     * Function checkLocationReset
     */
    function checkLocationReset(){
        if(closed_big) {
            window.location.hash = '';
            history.pushState('', document.title, original_url);
        }
    }

    /**
     * onhashchange
     */
    window.onhashchange = openAccordionByHash;
  

    /**
     * Slider (BIG)
     */
    var _CaptionTransitions = [];
    _CaptionTransitions["MCLIP|B"] = {$Duration:900,$Clip:8,$Move:true,$Easing:{$Clip:$JssorEasing$.$EaseInOutCubic}};
    var options = {
        $SlideDuration: 1000,    //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
        $DragOrientation: 3,     //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
        $AutoPlay: true,         //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
        $AutoPlayInterval: 4000,  //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
        $CaptionSliderOptions: { //[Optional] Options which specifies how to animate caption
            $Class: $JssorCaptionSlider$, //[Required] Class to create instance to animate caption
            $CaptionTransitions: _CaptionTransitions, //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
            $PlayInMode: 1, //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
            $PlayOutMode: 3 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
        }
    };

    j('#slider1_container .slider-image:eq(0)').one('load',function(){
        sWidth = j('#slider1_container .slider-image').width();
        sHeight = j('#slider1_container .slider-image').height();
        j('#slider1_container,.slider1_container').width(sWidth);
        j('#slider1_container,.slider1_container,.slider-caption').height(sHeight);
        j('.slider-caption').width(sWidth*0.35);
        j('.slider-caption').height(sHeight*0.5);
        var jssor_slider1 = new $JssorSlider$("slider1_container", options);
        function ScaleSlider() {
            var parentWidth = j('#slider1_container').parent().width();
            if (parentWidth) {
                jssor_slider1.$ScaleWidth(parentWidth);
            }
            else{
                window.setTimeout(ScaleSlider, 30);
            }
        }
        //Scale slider after document ready
        ScaleSlider();
        if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
            //Capture window resize event
            j(window).bind('resize', ScaleSlider);
        }
    }).each(function(){
        if(this.complete){ j(this).load(); }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="csc-menu csc-menu-accordion csc-menu-accordion-big ui-accordion ui-widget ui-helper-reset" role="tablist"><div data-uid="109" id="c109" class="ui-accordion-header big ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-controls="ui-accordion-1-panel-0" aria-selected="false" aria-expanded="false" tabindex="0"><h3 class="blue">Blister machine B 1240</h3><span>Max. 250 blisters/min.
Max. format area 130 x 156,6 mm
</span><span class="ui-accordion-header-icon ui-icon ui-icon-plus"></span></div></div>

0 个答案:

没有答案