Jquery show div form another page

问题

I have this problem which i find a bit difficult to explain but I will try:

I have a page which fades in and out some divs taken from other pages with the load() function on click event. One of this divs contain a selection of pictures showed using Jquery.Cycle. Although on the page itself the jquery.Cycle works ok, when imported in to the page it does not. Hope my explanation is clear.

The code for importing is this:

$('#wrapper a').live("click", function(evt) {

    evt.preventDefault();

    var url = $(this).attr('href');
    var oldDiv = $('#wrapper-content');
    var newDiv = $('#wrapper-content1').load(url + ' #wrapper-content');
    newDiv.hide();
    $('#wrapper-mid-in-right').prepend(newDiv);
    newDiv.fadeIn(1000);
    oldDiv.fadeOut(1000,function() {

    $(this).remove();
    });

});

As said the cycle effect works ok on the page. Please help me. F.

$('#gallery').cycle({
fx: 'scrollRight',
timeout: 100000,
speed: 500,
delay: -2000,
pager: '#pager'

});

回答1:

I believe your problem has nothing to do with the code block you posted. The plugin works in the page itself because of a few things:

1. the Cycle plugin is loaded
2. the markup already exists
3. the plugin is initiated appropriately ($(document).ready(), etc.)

When dynamically loading this content into a page, none of these facts may be true.

1. Is the Cycle plugin being loaded in this page?
2. You have to initiate the Cycle plugin after you've imported the new markup.

The JS in the the parent page (the page loading the Cycle content) should be something roughly like:

$('#wrapper-content1').load(url + ' #wrapper-content', function() {
    $('#gallery').cycle({
        fx: 'scrollRight',
        timeout: 100000,
        speed: 500,
        delay: -2000,
        pager: '#pager'
    });
});

回答2:

try like this

$('#wrapper a').live("click", function(evt) {

    evt.preventDefault();

    var url = $(this).attr('href');
    var oldDiv = $('#wrapper-content');
    var newDiv = $('#wrapper-content1').load(url + ' #wrapper-content');
    newDiv.hide();
    $('#wrapper-mid-in-right').prepend(newDiv);
    newDiv.fadeIn(1000);
    oldDiv.fadeOut(1000,function() {

    $(this).remove();
    });


    $('#gallery').cycle({
        fx: 'scrollRight',
        timeout: 100000,
        speed: 500,
        delay: -2000,
        pager: '#pager'

     });

});

回答3:

Try changing as below, I hope it will help you. I have written the comment about changes next to the code

function cycleFunction(){
 // implement cycle functionality here
}

$(document).ready(function(){
   cycleFunction(); // calling function for 1st time

   $('#wrapper a').on("click", function(evt) {    
    evt.preventDefault();

    var url = $(this).attr('href');
    var oldDiv = $('#wrapper-content');
    var newDiv = $('<div>').attr('id','wrapper-content1'); // create the div with id
    $('#wrapper-mid-in-right').prepend(newDiv); include in the existing div
    $('#wrapper-content1').load(url + ' #wrapper-content', function(){
      cycleFunction(); // calling function everytime div load
    }); // load the new div
  });    
});

来源：https://stackoverflow.com/questions/8667193/jquery-show-div-form-another-page