在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(); 

    }); 
})