如何处理动态填充 ul li 的点击事件？

Posted 2023-05-09

【中文标题】如何处理动态填充 ul li 的点击事件？

【英文标题】：How can I handle click event of dynamicly populated ul's li?

【发布时间】：2011-05-01 23:25:12

【问题描述】：

我正在使用授权系统。我有四个无序列表。我们将它们命名为 list1、list2、list3 和 list4。其中两个是关于国家的，其余两个是关于城市的。 list1 包含所有国家。 list2 包含一名员工的所有可用国家/地区。用户正在将一个国家从 list1 移动到 list2。当用户单击 list2 时，我可以处理该事件，并且我正在使用 jquery 将这个国家的城市填充到 list3 中。该城市列表来自一个 aspx 网页。我想处理list4的点击事件。 list4 包含所有可供员工使用的城市。这些是我写的。

$('#clist2 li').click(function() 
    alert('test');
);

但我没有看到警报。如何处理list4的点击事件？

【参考方案1】：

你可以在这里使用.delegate()，像这样：

$('#clist2').delegate('li', 'click', function() 
    alert('test');
);

$('#clist2 li') 获取 #clist2 内的所有 <li> 元素 当时，您可以将处理程序绑定到 #clist2 直接监听来自任何 @ 的 click 事件987654330@ 元素（存在或稍后添加，它们的事件以相同的方式冒泡）到bubble up。

【讨论】：

+1 IMO，.live() 方法需要从 API 中删除。

@patrick dw：你到底为什么想要那个？对于这个特定的 SO 问题，我喜欢这种委托方法，但是在很多情况下它会产生不太清晰的代码或可能导致维护问题。 Live 是一个有用的工具，应该在适当的时候使用。

@thenduks - .live() 有缺点，让我们举个简单的例子：$("[attr=value]").live("click", function() );。那刚刚做了什么？它执行了一个非常昂贵的选择器来查找具有该属性/值对的所有元素......然后将结果扔掉，因为我们根本不关心它，我们只想要 document 上的 click 处理程序的选择器首先。比较：$("body").delegate("[attr=value]", "click", function() ); 不执行该选择器，它的成本要低得多。

@thenduks - 正是 Nick 所说的，以及 .delegate() 使人们根据代理所在的容器进行思考，因此计划他们的代码以提高效率。因为.delegate() 做了.live() 所做的事情，所以如果.live() 不存在，我们就不会失去任何东西（正如尼克所证明的那样）。当你说“应该在适当的时候使用”时，你是绝对正确的。不幸的是，“它只是工作” 因素导致它被过度使用。

我认为“昂贵的选择器”的缺点在这里被夸大了......另外，我经常有像$(some_selector).doSomething().find(selector).doSomething().end().live('click', function()...); 这样的代码——换句话说，我做选择器是为了其他目的.尽管如此，delegate（相当新）还是不错的，并且在很多情况下会更好——我只是认为live 仍有用例，并且不希望看到它被完全删除。

【参考方案2】：

您可以使用.live() 让所有lis 获取点击事件，无论它们在绑定时是否存在（例如，选择器必须匹配）。