Question

.click（）的问题在于我有这段代码：

$(".masteries").click(function()
{
    $(".masteries").css("background-color","red");
});

当我点击一个带有课程＆＃34;熟练的＆＃34;没有任何反应，但如果我点击这个代码的div：

$("body").click(function()
{
    $(".masteries").click(function()
    {
        $(".masteries").css("background-color","red");
    });
});

一切正常。可能是什么问题？

Answer 1

如果在加载页面（DOM就绪）后创建了.masteries元素，则使用事件委派：

$(document).on('click', '.masteries', function() {
    $(this).css("background-color","red");
});

如果 DOM ready 事件中确实存在.masteries个元素，请使用以下内容：

$(document).ready(function() {
    $(".masteries").on('click', function() {
       $(this).css("background-color","red");
    });
});

Answer 2

如果要动态加载元素，则可以使用委托事件处理程序，将其附加到更改元素的不变的祖先：

$(document).on('click', '.masteries', function() {
    $(".masteries").css("background-color","red");
});

这可以通过监听事件（例如点击）来冒泡到祖先元素，然后将jQuery选择器应用于泡泡链中的任何元素，然后将该函数仅应用于导致事件的任何匹配元素。这意味着元素只需存在于事件时间而不是事件注册时间。

使用document作为默认设置，而不是'body'因为'body'有一个令人讨厌的错误（如果样式导致计算出的身高为0，则不会将鼠标事件冒泡到它！）

以下建议：

这种行为听起来像你只是缺少一个DOM就绪处理程序，但没有一个完整的例子，这只是一个猜测。 body确实存在，但.masteries仅在您的代码跟随页面中的元素时才匹配。

$(function(){
    $(".masteries").click(function()
    {
        $(".masteries").css("background-color","red");
    });
});

注意：