jQuery Tools Overlay & jQuery.live event

Question

Как получить эту работу с 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")); 
    } 
}); 

Я попробовал это, без 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

Вы должны установить его для загрузки на конфигурации. Вы можете сделать это, добавив load: true в объект конфигурации.

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

the docs.

Answer 2

покрышка срабатывает на click, так что вам нужно использовать load option, как это:

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

Оверлей открыт событием click, поэтому, несмотря на то, что вы привязывали оверлей, оно не открывалось, потому что событие, от которого оно зависело, уже произошло. По умолчанию для load также false, но так как вы хотите, чтобы открыть, как только он создан, чтобы установить его true :)

Answer 3

Теперь он отлично работает. Для всех тех, кто имеет те же проблемы, как я здесь код;)

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