在ajax調用後再次運行jquery函數

Question

在ajax調用之後再次運行腳本有什麼方法嗎？

我有一個photoswipe（燈箱）的jQuery插件我這樣調用：

jQuery(document).ready(function($){ 

    if($('.img-frame a').length > 0){ 

     var myPhotoSwipe = $(".img-frame a").photoSwipe(); 

    } 
}); 

我也有一個AJAX「加載更多信息」功能，顯然photoswipe不針對後裝圖片首頁加載。

我沒有太多的Ajax知識，對此有什麼幫助？由於

更新：這裏的 '負載更多的' 腳本：

jQuery(document).ready(function($) { 

    // The number of the next page to load (/page/x/). 
    var pageNum = parseInt(djwd_load_posts.startPage) + 1; 

    // The maximum number of pages the current query can return. 
    var max = parseInt(djwd_load_posts.maxPages); 

    // The link of the next page of posts. 
    var nextLink = djwd_load_posts.nextLink; 

    /** 
    * Replace the traditional navigation with our own, 
    * but only if there is at least one page of new posts to load. 
    */ 
    if(pageNum <= max) { 
     // Insert the "More Posts" link. 
     $('#content') 
      .append('<div class="lp-placeholder-'+ pageNum +'"></div>') 
      .append('<p id="lp-load-posts" class="long-button"><a href="#">Load More Posts<i class="icon-chevron-down icon-large"></i></a></p>'); 

     // Remove the traditional navigation. 
     $('#nav-below').remove(); 
    } 


    /** 
    * Load new posts when the link is clicked. 
    */ 
    $('#lp-load-posts a').click(function() { 

     // Are there more posts to load? 
     if(pageNum <= max) { 

      // Show that we're working. 
      $(this).text('Loading posts...'); 

      $('.lp-placeholder-'+ pageNum).load(nextLink + ' .post', 
       function() { 

        $(this).hide().fadeIn(700); 

        // Update page number and nextLink. 
        pageNum++; 
        nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum); 

        // Add a new placeholder, for when user clicks again. 
        $('#lp-load-posts') 
         .before('<div class="lp-placeholder-'+ pageNum +'"></div>') 

        // Update the button message. 
        if(pageNum <= max) { 
         $('#lp-load-posts a').text('Load More Posts'); 
        } else { 
         $('#lp-load-posts a').text('No more posts to load.'); 
        } 
       } 
      ); 
     } else { 
      $('#lp-load-posts a').append('.'); 
     } 

     return false; 
    }); 
}); 

我把它在WordPress的functions.php中這樣說：

function djwd_ajax_load_init() { 
    global $wp_query; 

    if(!is_singular()) { 
     wp_enqueue_script('ajax-load-posts', get_template_directory_uri() . '/js/ajax-load-posts.js', array('jquery'), true); 

     $max = $wp_query->max_num_pages; 
     $paged = (get_query_var('paged') > 1) ? get_query_var('paged') : 1; 

     wp_localize_script(
      'ajax-load-posts', 
      'djwd_load_posts', 
      array(
       'startPage' => $paged, 
       'maxPages' => $max, 
       'nextLink' => next_posts($max, false) 
      ) 
     ); 
    } 
} 
add_action('template_redirect', 'djwd_ajax_load_init'); 

Answer 1

把它放在一個函數，調用在頁面加載並在你的ajax調用。

function setMyPhotoSwipe() { 
    var $targets = $('.img-frame a').not('.photo-swipe'); 

    if($targets.length > 0){ 
     $targets.addClass('photo-swipe').photoSwipe(); 
    }; 
}; 

jQuery(document).ready(function($){ 
    setMyPhotoSwipe(); 
}); 

順便說一句，如果dont't需要變量myPhotoSwipe，那麼你dont't必須設置它。您還使用了兩次$('.img-frame a')，因此緩存結果。

而且你的負荷來電：

$('.lp-placeholder-'+ pageNum).load(nextLink + ' .post', 
      function() { 

       $(this).hide().fadeIn(700); 

       // Update page number and nextLink. 
       pageNum++; 
       nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum); 

       // Add a new placeholder, for when user clicks again. 
       $('#lp-load-posts') 
        .before('<div class="lp-placeholder-'+ pageNum +'"></div>') 

       // Update the button message. 
       if(pageNum <= max) { 
        $('#lp-load-posts a').text('Load More Posts'); 
       } else { 
        $('#lp-load-posts a').text('No more posts to load.'); 
       } 

       // New content has been loaded and insertet, so set up photo swipe 
       setMyPhotoSwipe(); 
      } 
     ); 

Answer 2

我建議以下

jQuery(document).ready(InitializeSettings); 

也呼籲在阿賈克斯同樣的呼籲

ajax_success_function(){ // depends on your ajax call 
    InitializeSettings(); 
    } 


    function InitializeSettings(){ 

    if($('.img-frame a').length > 0){ 
     var myPhotoSwipe = $(".img-frame a").photoSwipe(); 
    } 
    } 

Answer 3

就像睡眠說。

創建一個將代碼放入其中的獨立函數。

您可以調用該函數你$(document).ready()

內，然後使用相同的功能，在你的Ajax成功之路（查看文件：http://api.jquery.com/jQuery.ajax/）。

或者您可以使用此：http://api.jquery.com/ajaxStop/

這將有助於您使用相同的功能時，你的每一個Ajax調用停止。

Answer 4

$.ajax({ 
    url: 'url/test.php', 
    success: function(data) { // also gets response from php and can be manipulated if required! 
     setMyPhotoSwipe(); 
    } 
}); 

Answer 5

沒有代理插件，它由作者的插件來合併它。爲什麼不作弊：（對不起，不能測試代碼，並不能確定其相關photoSwipe插件）

jQuery(document).ready(function($){ 

    $(this).on('mousedown','.img-frame a',function(){ //document or better parent container// mousedown or any relevent event use by photoSwipe 
      if(!$(this).data('swiped')) { 
       $(this).data('swiped',true).photoSwipe(); 
      } 
    }); 

}); 

Answer 6

對不起，我在jQuery的新手...如何使用ajaxComplete（）

http://api.jquery.com/ajaxcomplete/

一旦我必須在ajax調用後執行一個函數...並且ajaxComplete（）完成了這個技巧...

$(document).ready(function(){ 

    function some_function() 
    { 
    //---- this function to be called after ajax request... 
    } 

    $(document).ajaxComplete(function() { 

    some_function(); 

    }); 
})