superBind

a jquery plugin that calls an eventHandler even when the targeted element is behind other elements. it acts just like the `bind` method.

by gion_13

HTML

<div id="mesh"></div>

CSS

.other_el{
    float : left;
    margin : 10px;
    border-radius : 20px;
    -moz-border-radius : 20px;
    -webkit-border-radius : 20px;
    
    border : 10px dotted green;
    background-color : red;
    text-align : center;
    padding : 20px;
}
#mesh{
    width : 100%;
    height : 500px;
    opacity : 0.5;
    background-color : #ccc;
    z-index : 100;
    position : absolute;
}

JavaScript

// plugin
(function($) {
    $.fn.superBind = function(eventType, callback) {
        if (typeof callback !== 'function') return this;
        return this.each(function() {
            var self = this,
                $self = $(this);
            $(document).bind(eventType, function(e) {
                var clickX = e.pageX,
                    clickY = e.pageY,
                    offset = $self.offset(),
                    range = {
                        x: [offset.left, offset.left + $self.outerWidth()],
                        y: [offset.top, offset.top + $self.outerHeight()]
                    };
                (clickX >= range.x[0] && clickX <= range.x[1]) && (clickY >= range.y[0] && clickY <= range.y[1] && callback.call(self, e));
            });
        });
    }
})(jQuery);

// element generation
for (var i = 1; i <= 30; i++)
$('body').append($('<div class="other_el">#' + i + '</div>'));

$('.other_el').superBind('click', function() {
    alert($(this).text());
}).superBind('mousemove', function() {
    var r = function() {
        return Math.floor(Math.random() * 255);
    };
    $(this).css('background-color', 'rgb(' + r() + ', ' + r() + ', ' + r() + ')');
});