Exécuter à nouveau la fonction jquery après un appel ajax

Question

Existe-t-il un moyen de réexécuter un script après un appel ajax?

J'ai un photoswipe (lightbox) plug-in que j'appelle comme jquery ceci:

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

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

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

    } 
}); 

J'ai aussi un ajax 'charge plus les messages' fonction, et évidemment photoswipe ne cible pas les images chargées après la première page de chargement.

Je n'ai pas beaucoup de connaissances ajax, aucune aide à ce sujet? Merci

MISE À JOUR: Voici la 'charge plus' script:

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; 
    }); 
}); 

Je l'appelle dans Wordpress functions.php cette façon:

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

Mettez-le dans une fonction, dans le pageload appel et dans votre appel 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(); 
}); 

Soit dit en passant, si besoin Dont't myPhotoSwipe variable, vous devez Dont't régler. Vous utilisez également $('.img-frame a') deux fois, cachez donc le résultat.

Et votre appel de charge:

$('.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

je suggère le ci-dessous

jQuery(document).ready(InitializeSettings); 

appellent également les mêmes dans les appels ajax

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

Comme l'a dit Morpheus.

Créez une fonction séparée dans laquelle votre code a été ajouté.

Vous pouvez appeler cette fonction dans votre $(document).ready()

Ensuite, utilisez la même fonction dans votre chemin de succès ajax (consultez la documentation: http://api.jquery.com/jQuery.ajax/).

Sinon, vous pouvez utiliser ceci: http://api.jquery.com/ajaxStop/

Il vous facilitera d'utiliser la même fonction lorsque tous vos appels Ajax arrête.

Answer 4

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

Answer 5

Il n'y a pas de délégation pour le plugin, il appartient au plugin de l'auteur de l'incorporer. Pourquoi ne pas tricher: (désolé, ne peut pas tester le code et pas sûr de son plug-in pertinent pour 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

Désolé, je suis un novice dans jquery ... Comment l'utilisation ajaxComplete()

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

Une fois j'ai dû exécuter une fonction après un appel ajax ... et ajaxComplete() a fait l'affaire ...

$(document).ready(function(){ 

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

    $(document).ajaxComplete(function() { 

    some_function(); 

    }); 
})