jQuery Tools Overlay & jQuery.live event

Question

How to get this work with 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"));
    }
});

I tried this with no 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

You need to set it to load on configuration. You can do that by adding load: true to the config object.

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

Here are the docs.