[英]Run jquery function again after ajax call
在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');
把它放在一個函數中,調用pageload和你的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();
});
順便說一句,如果不需要變量myPhotoSwipe,那么你不必設置它。 你也使用$('.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();
}
);
插件沒有委托,它取決於作者的插件。 為什么不作弊:(對不起,無法測試代碼並且不確定它與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();
}
});
});
$.ajax({
url: 'url/test.php',
success: function(data) { // also gets response from php and can be manipulated if required!
setMyPhotoSwipe();
}
});
我建議如下
jQuery(document).ready(InitializeSettings);
也可以在ajax調用中調用相同的內容
ajax_success_function(){ // depends on your ajax call
InitializeSettings();
}
function InitializeSettings(){
if( $('.img-frame a').length > 0 ){
var myPhotoSwipe = $(".img-frame a").photoSwipe();
}
}
像Morpheus說的那樣。
創建一個單獨的函數,將您的代碼放入其中。
您可以在$(document).ready()
調用該函數
然后在ajax成功路徑中使用相同的函數(查看文檔: http : //api.jquery.com/jQuery.ajax/ )。
或者您可以使用此: http : //api.jquery.com/ajaxStop/
當您的每個Ajax調用停止時,它將幫助您使用相同的功能。
對不起,我是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();
});
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.