Question

我有一个关于jQuery的新手问题。为什么我可以触发下面的click事件，即使元素已经改变了类？即使我将课程从“编辑”改为“潮”，$（“。edit”）。click（）正在处理该元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".edit").click(function(){
                console.log(this);
                $(this).removeClass("edit").addClass("tide");
            });
        });
    </script>
</head>

<body>
    <div class="edit">Hi there</div>
</body>
</html>

谢谢！

Answer 1

如果您想要这种行为，请使用.live()，如下所示：

$(document).ready(function(){
    $(".edit").live('click', function(){
        console.log(this);
        $(this).removeClass("edit").addClass("tide");
    });
});

You can test it out here。就像现在一样，$(".edit")找到与当时.edit选择器匹配的元素并绑定到它们，那些click事件处理程序绝不依赖于之后的类名。使用.live()时，会在事件发生时评估选择器，因此无关紧要。

Answer 2

click事件绑定到元素，而不是类。在您的示例中，您将基于edit类选择元素，然后将click事件附加到这些元素。一旦附加到元素，它就会保持连接，直到被明确删除，无论将来对元素的CSS类进行哪些更改。

正如尼克克拉弗指出的那样，jQuery的.live()方法可以在这里做你想做的事。

虽然类名已更改但已触发click事件

2 个答案: