jQuery event bubbling: How to capture a nested click?

Question

I'm capturing a click on any given LI in:

<ul>
    <li class="opt">Text 1</li>
    <li class="opt">Text 2</li>
</ul>

With the code:

$('.opt').live('click', function(event) {
    console.log("Click!");
}

and it works wonderfully :) However, I also need to support the ability for nested block elements to exist inside the LI, without changing my javascript code. The above javascript does not fire when Text 1 in clicked in this case:

<ul>
    <li class="opt">
        <div>
            <div>
                <span>Text 1</span>
            </div>
        </div>
    </li>
</ul>

I've read that jQuery events "bubble up" through the DOM, but unfortunately no such bubbling is occurring here. What's the cleanest way to capture a click event inside an LI when I'm not sure of what other elements might be inside of it?

Answer 1

You need a dot on that class selector, then it should work:

$('.opt').live('click', function(event) {
    console.log("Click!");
}

Unless you're doing something abnormal (e.g. .stopPropogation() on a clicked child), the event should bubble right up all by itself.

Answer 2

$('.opt, .opt *').live('click', function(event) {
    console.log("Click!");
}