Question

<ul id ='foo'>
    <li><p>hello</p></li>
    <li><p>hello</p></li>
    <li><p>hello</p></li>
</ul>

$('#foo').delegate('li', 'click', function(event) {
    if (#foo) { 
      do 
    } else if (li) {
      do 
    }
});

我有很多对象，每页近1000个。我想通过在一个事件委托上处理每个父对象和子对象来减少事件绑定的数量。

我该怎么做？上面的代码仅适用于li。

Answer 1

$(document).delegate('ul', 'click', function(event) {
    console.log(event);
    if (event.target.nodeName == 'P') { 
      alert('p clicked'); 
    } else {
      alert('parent clicked'); 
    }
});

这会将代表团减少到UL级别。如果您愿意，请将#foo替换为ul。

JSFIDDLE

Answer 2

使用此：

$('#foo').on('click', function(event) {
    var action_target = $(event.target);
    if (action_target.closest('li').length > 0) { /* an LI was clicked */ }
    else { /* Something else inside #foo was clicked */ }
}

Answer 3

Derek's suggestion很不错但不完全可靠，因为.closest('li')可能会找到可能包含#foo的列表项。此外，在这种情况下，.length > 0始终为true。

话虽如此，没有必要使用.closest()遍历DOM树。实际上，我们已经知道只有在单击#foo或其后代之一时才会调用处理程序，因此，我们只需要检查点击的元素（event.target）是否为#foo （this）：

$('#foo').click(function (e) {
    if (e.target === this) {
        // #foo was clicked directly
    } else {
        // something inside of #foo was clicked
    }
});

但是，.closest()可用于检索#foo内的特定元素。假设我们想要点击的直接LI，以便为其添加selected类：

$('#foo').click(function (e) {
    var item;
    if (e.target === this) {
        // #foo was clicked directly
    } else {
        // something inside of #foo was clicked
        // 3 options to find the related item :

        // option 1 - easy to read
        item = $(e.target).closest('#foo > li');

        // option 2 - useful if the container has no ID
        item = $(e.target).closest($(this).children());

        // option 3 - probably the fastest one
        item = e.target;
        while (item.parentNode !== this) item = item.parentNode;
        item = $(item);

        item.addClass('selected');
    }
});

以下是演示：http://jsfiddle.net/wared/dE6Pj/。

文档：http://api.jquery.com/closest/。

处理委托上的父和子（jQuery）

3 个答案: