Я недавно делал сильно интерактивный макетопрототип сайта, и чтобы сильно не париться, вообще все события вешал на body, с делегированиям по селектору.
Для этого специально наговнокодил jquery-plugin.
При использовании в хроме у меня сложилось впечатление, что никаких ограничений нет.
А конкретно для вашей задачи достаточно одного биндинга на корень дерева, с разбирательством внутри хэнлера на тему какой именно элемент кликнут (он передаётся в хэндлер толи в event.target, толи вообще в this).
Вот, например, моя реализация для хитробиндинга:
$.fn.xon = function(type, selector, handler) {
/** tricky binding
*
* userfull for global binding.
*
* if selector starts with parent selector:
* matching parent element is retrieved for handler
* otherwise, it is $(this)
*
* if selector ends with [attr]:
* attribute or data value is retrieved for handler
*
* if target is input, value is retrieved
*
* event trigger calls handler(event, $parent, $this, value)
*/
var parent, attr, data;
if( selector.indexOf(" ") != -1 ) {
var parts = selector.split(" ");
parent = parts[0];
}
if( selector.slice(-1) == "]" ) {
var a = selector.substring(selector.lastIndexOf("[")+1, selector.lastIndexOf("]"));
if( a.indexOf("=") == -1) {
if( a.slice(0,5) == "data-" ) {
data = a.slice(5);
} else {
attr = a;
}
}
}
this.on(type, selector, function(ev) {
var $t = $(this),
$p = parent ? $t.parents(parent).eq(0) : $t,
v = null;
if( data ) v = $t.data(data);
else if( attr ) v = $t.attr(attr);
else if( $t.is(":input") ) v = $t.val();
handler(ev, $p, $t, v);
});
return this;
};
пример использования:
$("body")
.xon('click', ".panel-heading [x-line-toggle-options]", function(ev, $parent, $target, value) {
// $parent = то, что .panel-heading
// $target = то, что имеет атрибут x-line-toggle-options
// value = значение атрибута
})
