jQuery टूल्स ओवरले और jQuery.live ईवेंट

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

मुझे कोई उत्तराधिकारी के साथ इस की कोशिश की:

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