jQuery 单击或鼠标悬停功能未命中

Question

我有以下 HTML 元素:

<a href='#' class='receipt' id='{some id. generated dynamically}'>Receipt</a>

我有以下 jQuery，用于处理点击:

$('.receipt').click(function () {
                alert('hai');
                alert($(this).attr('id'));
            });

由于某种原因，当我点击...时什么也没有发生。我最初尝试使用mouseover，但我认为我做得不正确，所以我尝试了click。没有骰子..我在这里遗漏了什么吗？

更新 - 这就是它最终的工作方式，我按照 Jeff B 的建议使用 .live 而不是 .on，但我确信 .on 也可以工作。

$('.receipt').live('click', function () {
  alert('hai');
  alert($(this).attr('id'));
});

更新 2 - .on 将在未来取代 .live，因此您应该使用 .on。

Answer 1

你提到id是动态生成的。如果在创建处理程序之后创建元素，则不起作用。

对于动态元素，使用.on():

$('body').on('click', '.receipt', function() {
    alert('hai');
    alert($(this).attr('id'));
});

在本例中，body 是本质上处理点击的元素，一旦事件沿 DOM 向上传播，它就会确保它源自 .receipt。您可以使用 .receipt div 的父/祖先元素(最好是更接近的元素)来代替 body。

因为 body 处理点击，所以处理程序附加到始终存在的东西。这样您就可以添加和删除 .receipt 元素，而不必担心处理程序消失。