Công cụ jQuery Lớp phủ & sự kiện jQuery.live

Question

Cách tải công việc này bằng 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")); 
    } 
}); 

Tôi cố gắng này không có succes:

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

Bạn cần đặt để tải cấu hình. Bạn có thể làm điều đó bằng cách thêm load: true vào đối tượng cấu hình.

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

Dưới đây là the docs.

Answer 2

Lớp phủ được kích hoạt trên một click, vì vậy bạn cần phải sử dụng load option, như thế này:

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

Lớp phủ được mở bởi sự kiện click của bạn, vì vậy ngay cả khi bạn đã gắn kết lớp phủ, lớp phủ không mở vì sự kiện phụ thuộc vào sự kiện đã xảy ra. Giá trị mặc định cho load cũng là false, nhưng vì bạn muốn mở nó ngay sau khi được tạo, hãy đặt nó thành true :)

Answer 3

Bây giờ nó hoạt động tốt. Đối với tất cả những ai có những rắc rối tương tự như tôi đây là mã;)

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