点击事件上的JQuery选择器

Question

当我点击div中的某个类时，我想触发某些内容。

我试过这个

$("div .event").click(function() {
    alert($( this ).text());
}); 

和

$("div").on("click", $('.event'), function() {
    alert($( this ).text());        
}); 

//Or 
$(".SimpleCalendar .event").click(function() {
    alert($( this ).text());
}); 
//I do not even know what this is supposed to do ...
$(".SimpleCalendar tbody tr td div .event").click(function() {
    alert($( this ).text());
}); 

还有更多，但仍然无法弄清楚为什么这不起作用

我的HTML如下：

Answer 1

您选择的div是具有类.event的{​​{1}}，而不是它的后代。因此，正确的选择器是div.event。试试这个：

$("div.event").click(function() {
    alert($( this ).text());
});

或者只是：

//Warning: if elements unlike the div also have the event class then stick to 
//the above as the selector is more specific
$(".event").click(function() {
    alert($( this ).text());
}); 

并且不要忘记这些选项中的每一个都应该像DOM一样准备好：

$(function() {
    $("div.event").click(function() {
        alert($( this ).text());
    }); 
});

Answer 2

您正在使用父级后代选择器，因为event类位于div本身而不是其后代，您的选择器不正确。

其中一个应该适合你

试试这个

$("div.event").click(function() {
    alert($( this ).text());
});

，或者

$(".SimpleCalendar").on("click", '.event', function() {
    alert($( this ).text());        
}); 

有关选择正确选择器的更多信息，请参阅this