Question

Consider the following code:

$(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");
        }
    });
});

And HTML:

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

For some unknown reason the Firebug throws this error when I click anywhere on the page:

The funny thing about this is that this happens only when content is dynamically appended to the page. If I remove the append statement and instead just paste it in the page itself, the error is not thrown and everything works correctly.

Do you have any explanation of this anomaly?

Answer 1

Your code as shown worked for me in Chrome, but perhaps Firefox behaves differently if you say $(".") is, as Smileek said, effectively what you’re doing if you click on an element that doesn’t have a class, and this causes an error because it is an invalid selector.

But even ignoring the error you are currently getting, I don’t think this line:

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

is doing what you think it is. It says to find all elements with that class, then find all of the parent elements for those elements, and then calls .hasClass() on the resulting set of elements which will, according to the .hasClass()` documentation, return true if “any of the matched elements are assigned the given class”. Which could still work for the html you’ve shown since you only have two elements, but…

If you want to test “does the clicked element’s parent have the class “outer” try this:

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

Demo: http://jsfiddle.net/PCTnS/

Not only does that better reflect what I imagine you’re trying to do, it avoids the error.