Reinitialize jQuerytools Overlay on ajax loaded element

问题

I am trying to reinitialize a Overlay on new ajax loaded elements. Here my code:

  $('input.search-files').keyup(function(event){
      if( event.keyCode == 13 ) {

          $.ajax({
          type: "GET",
          url: ...,
          dataType: "html",
          data: {...},
          beforeSend: function(){ 
              $('.tr-documento').fadeOut('fast', function(){ $(this).remove(); });
              $('.table-content').find('.table-loader').show(); 
          },
          success: function(data) {
              if( $(data).filter('tr').length == 0 ){ 
                  $('.table-loader').before( '<tr class="tr-documento"><td colspan="10">Non ci sono</td></tr>' ); 
              } else{
                  $('.table-loader').before( $(data).filter('tr') );
              }        
             $('.table-content').find('.table-loader').hide();
             $("table.table-content").tablesorter({headers: { 0: { sorter: false }, 6: { sorter: false },7: { sorter: false },8: { sorter: false },9: { sorter: false } } });
             reInitializeAjaxed();
             $(".modifica-file[rel]").overlay();
        }
      });
    }
  });

This function is triggered on "ENTER" keyup. Everything work fine, table sorter works at first hit. jQuerytools overlay event instead, is binded only at the second hit on "ENTER".

Someone knows this issue? Is there a way to "live" overlay event and not re-init each ajax call? I tried this:

$(document).delegate('.modifica-file[rel]', 'load', function(){ $(".modifica-file[rel]").overlay(); });

but is not working..

回答1:

I think is not opened because the overlay is only initialized without firing.

You can set the load attribute at true like:

$(".modifica-file[rel]").overlay({load: true});

or fire the overlay manually using the load method:

$(".modifica-file[rel]").data("overlay").load();

Docs: http://jquerytools.org/documentation/overlay/

Example: http://jquerytools.org/demos/overlay/trigger.html

回答2:

I found solution here: http://flash.flowplayer.org/forum/tools/40/21252

There are many solutions on this link, i am using the following:

$(".modifica-file[rel]").live('click', function () {
 $(this).overlay().load();
 $(this).overlay().load();
 return false;
});

I think this is quite dirty solution...$.live() method is not supported anymore on latest jQuery versions...but i am using 1.7.2 and it is working fine!

I added this snippet to end of SUCCESS AJAX callback.

来源：https://stackoverflow.com/questions/18231368/reinitialize-jquerytools-overlay-on-ajax-loaded-element

标签

javascript

ajax

jquery

jquery-tools