Question

I have this reqular ul > li structure

<ul class='compare'>
    <li>Level 1
        <ul>
            <li>Level 2</li>
            <li>Level 2</li>
            <li>Level 2</li>
            <li>Level 2</li>
        </ul>
    </li>
    <li>Level 1
        <ul>
            <li>Level 2</li>
            <li>Level 2</li>
            <li>Level 2</li>
            <li>Level 2</li>
        </ul>
    </li>
    <li>Level 1
        <ul>
            <li>Level 2</li>
            <li>Level 2</li>
            <li>Level 2</li>
            <li>Level 2</li>
        </ul>
    </li>
</ul>

I use $("ul.compare > li").live(...); to assign mouse events to children of ul

But now I need to get children of an object. Let say obj is my $("ul.compare")

If I do like this $("li", obj).live(...) this assigns event to all li not only children.

I can do in this way but I don’t like it

obj.children("li").each(function () {
    $(this).live(...);
});

Is there a way to select all children of an object and apply live directly without using .each()?

Answer 1

Thanks @Matt, it seems you answered my question with your comment unwittingly. Solution is .on()

While this is not working, and we have to use .each() to assign mouseover to every matched element

//obj.children("li").children("ul").children("li").live("mouseover", function () {...}); //Does not work
obj.children("li").children("ul").children("li").each(function () {
    $(this).live("mouseover", function () {...});
});

this works and there is no need .each()

obj.children("li").children("ul").children("li").on("mouseover", function () {...});