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。没有骰子......我在这里错过了什么？

更新 - 这就是它最终工作的方式，我使用.live而非{B}建议使用.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。您可以使用任何元素作为body div的父/祖先，而不是.receipt，而不是body。

因为.receipt处理点击，所以处理程序附加到始终存在的内容。这样，您可以添加和删除{{1}}元素，而无需担心处理程序消失。

Answer 2

将$('receipt')更改为$('.receipt')

Answer 3

你错过了'。'在你的选择器中。它用于选择类。

应该是：$('.receipt')。

Answer 4

你需要使用$('.receipt')来使用它的css选择器

来访问div

Answer 5

您需要添加.字符才能使用类选择器

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

请参阅class selector docs here

Answer 6

你必须记住，当你使用类时，你必须写.className，如果你使用id，你必须使用#idName，因为你必须将$（'收据'）更改为$（'。receipt' ）