1

考虑以下代码：

$(document).ready(function() {
    $("body").append("<div class='outer'><span class='inner'>Click me</span></div>");
    $("html").click(function(event) {
        var targetClass = event.target.className;
        if ($("." + targetClass).parents().hasClass("outer")) {
            alert("true");
        }
    });
});

和 HTML：

<div class="outer">
    <span class="inner">
        Click me!
    </span>
</div>

由于某些未知原因，当我单击页面上的任意位置时，Firebug 会引发此错误：

在此处输入图像描述

有趣的是，这仅在内容被动态附加到页面时才会发生。如果我删除 append 语句，而只是将其粘贴到页面本身，则不会引发错误并且一切正常。

你对这个异常有什么解释吗？

4

5 回答 5

2

您将click-event 附加到html，因此每个元素都可以成为目标。当您单击某个没有任何类的元素时，您会收到$(".")此错误。

您只需要检查是否targetClass为空。

于 2012-06-16T12:32:22.683 回答
1

如图所示，您的代码在 Chrome 中对我有用，但如果您说 $(".")的是，正如 Smileek 所说，Firefox 的行为可能会有所不同，如果您单击一个没有类的元素，实际上您正在做的事情，这会导致错误，因为这是一个无效的选择器。

但即使忽略您当前遇到的错误，我也不认为这一行：

if ($("." + targetClass).parents().hasClass("outer")) {

正在做你认为的事情。它说要找到该类的所有元素，然后找到这些元素的所有父元素，然后调用.hasClass()结果元素集，根据.hasClass()` 文档，如果“任何匹配的元素被分配给给定的类”。这仍然适用于您显示的 html，因为您只有两个元素，但是...

如果你想测试“被点击元素的父元素是否有“外部”类，试试这个：

if ($(event.target).parent().hasClass("outer")) {

演示：http: //jsfiddle.net/PCTnS/

这不仅更好地反映了我想象的您正在尝试做的事情，而且还避免了错误。

于 2012-06-16T12:42:34.057 回答
0

采用

$("body").append("<div class=\"outer\"><span class=\"inner\">Click me</span></div>");
于 2012-06-16T12:32:53.477 回答
0

当您使用 javascript 修改正文时，您必须使用live：

$("html").live('click', function() {....
于 2012-06-16T12:33:46.460 回答
0

我认为问题在于，当您单击inner实际上是在单击时outer，请尝试：

event.stopPropagation();
var targetClass = event.target.className;
于 2012-06-16T12:35:35.393 回答