在选择器中指定动态类名时出现 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 到页面时才会发生这种情况。如果我删除 append 语句并将其粘贴到页面本身中，则不会引发错误并且一切正常。

您对这种异常现象有什么解释吗？

Answer 1

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

您只需检查 targetClass 是否为空。