我希望在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>