jQuery Tools Overlay & jQuery.live event

Question

Jak uzyskać tę pracę z jQuery.live?

$("a[rel]").overlay({ 
    mask: '#3B5872', 
    effect: 'apple', 
    api: true, 
    onBeforeLoad: function() { 
     var wrap = this.getOverlay().find(".contentWrap"); 
     wrap.load(this.getTrigger().attr("href")); 
    } 
}); 

Próbowałem to bez sukcesu:

$("a[rel]").live('click', function() { 
    alert('live'); 
    $(this).overlay({ 
     mask: '#3B5872', 
     effect: 'apple', 
     api: true, 
     onBeforeLoad: function() { 
      var wrap = this.getOverlay().find(".contentWrap"); 
      wrap.load(this.getTrigger().attr("href")); 
     } 
    }); 
}); 

Answer 1

Musisz ustawić, aby załadować w konfiguracji. Możesz to zrobić, dodając load: true do obiektu konfiguracyjnego.

$("a[rel]").live('click', function (e) { 
    e.preventDefault(); //prevent default link action 

    $(this).overlay({ 
     mask: '#3B5872', 
     effect: 'apple', 
     api: true, 
     onBeforeLoad: function() { 
      var wrap = this.getOverlay().find(".contentWrap"); 
      wrap.load(this.getTrigger().attr("href")); 
     }, 
     load: true 
    }); 
}); 

Oto the docs.

Answer 2

Nakładka jest wyzwalany na click, więc trzeba użyć load option, tak:

$("a[rel]").live('click', function (e) { 
    $(this).overlay({ 
     mask: '#3B5872', 
     effect: 'apple', 
     api: true, 
     load: true, 
     onBeforeLoad: function() { 
      var wrap = this.getOverlay().find(".contentWrap"); 
      wrap.load(this.getTrigger().attr("href")); 
     } 
    }); 
    e.preventDefault(); 
});​ 

You can give it a try here.

Nakładka jest otwierana przez zdarzenie click, więc nawet jeśli wiązałeś nakładkę, nie była ona otwierana, ponieważ zdarzenie, od którego to zależy, już zaszło. Wartością domyślną dla load jest także , ale ponieważ chcesz, aby się otworzył zaraz po utworzeniu, ustaw go na true :)

Answer 3

Teraz działa dobrze. Dla wszystkich tych, którzy ma taki sam problem jak ja tutaj jest kod;)

<script type="text/javascript"> 
    // safe the overlay element in a global variable 
    var overlayElem; 

    $(document).ready(function() { 
     // register the click event for ajax load and page load 
     $("a[rel]").live('click', function (e) { 
      e.preventDefault(); 

      // save overlay 
      overlayElem = $(this); 

      // load overlay 
      $(this).overlay({ 
       mask: '#3B5872', 
       effect: 'apple', 
       api: true, 
       load: true, 
       onBeforeLoad: function() { 
        var wrap = this.getOverlay().find(".contentWrap"); 
        wrap.load(this.getTrigger().attr("href")); 
       } 
      }); 
     }); 
    }); 

    // send form data via ajax 
    function ajaxFormRequest(form, callback, format) { 
     $.ajax({ 
      url: form.action, 
      type: form.method, 
      dataType: format, 
      data: $(form).serialize(), 
      success: callback 
     }); 
    } 
    // close the overlay and update the table 
    function update_grid(result) { 
     overlayElem.overlay().close(); 
     $("#gridcontainer").html(result); 
    } 

</script>