jQuery Tools Overlay & jQuery.live Ereignis

Question

Wie Sie diese Arbeit mit jQuery.live erhalten?

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

Ich habe versucht, dies ohne Erfolg:

$("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

Sie müssen, es auf Konfiguration zu laden. Sie können das tun, indem Sie load: true dem Config-Objekt hinzufügen.

$("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 
    }); 
}); 

Hier sind the docs.

Answer 2

Das Overlay auf einem click ausgelöst wird, so müssen Sie die load option, wie diese verwenden:

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

Das Overlay wird durch das Ereignis click geöffnet. Obwohl Sie das Overlay gebunden haben, wurde es nicht geöffnet, da das Ereignis, von dem es abhängt, bereits aufgetreten ist. Der Standardwert für load ist auch false, aber da Sie es nicht mögen, so schnell öffnen, wie es erstellt, setzen Sie sich auf true :)

Answer 3

Jetzt funktioniert es gut. Für alle diejenigen, die die gleichen Probleme wie ich hat hier ist der Code;)

<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>