在选择器中指定动态类名时出现jQuery语法错误

Question

请考虑以下代码：

$(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语句，而只是将其粘贴到页面本身，则不会抛出错误，一切正常。

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

Answer 1

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

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

Answer 2

如图所示，您的代码在Chrome中适用于我，但如果您说 $(".")，那么Firefox可能会有所不同，正如Smileek所说的那样，如果您点击，您实际上正在执行的操作在一个没有类的元素上，这会导致错误，因为它是一个无效的选择器。

但即使忽略了你目前所犯的错误，我也不会想到这句话：

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

正在做你认为的事情。它说找到该类的所有元素，然后找到这些元素的父元素的所有，然后在生成的元素集上调用.hasClass()根据{{​​3}}，如果＆＃34;将为任何匹配的元素分配给定的类＆＃34;，则返回true。由于你只有两个元素，但仍然适用于你所显示的html，但是......

如果你想测试＆＃34;被点击元素的父母是否有类＆＃34;外部＆＃34;试试这个：

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

演示：the .hasClass()` documentation

这不仅能更好地反映我想象你想做的事情，还可以避免错误。

Answer 3

使用

$("body").append("<div class=\"outer\"><span class=\"inner\">Click me</span></div>");

Answer 4

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

$("html").live('click', function() {....

Answer 5

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

event.stopPropagation();
var targetClass = event.target.className;