jQuery event.target do pracy z dziećmi

Question

Moje pytanie odnosi się konkretnie do http://api.jquery.com/event.target/#example-1

Jeśli używasz rozpiętość w tagu <li> lub innego, aby zmienić styl, takich jak <b> jakom uczynił here, że część z element nie uruchomi funkcji JQuery do przełączania jej elementów podrzędnych. Jak można zrobić, aby to działało?

HTML:

<ul> 
    <li><b>This doesn't work,</b> this does 
    <ul> 
     <li>sub item 1-a</li> 
     <li>sub item 1-b</li> 
    </ul> 
    </li> 
    <li>item 2 
    <ul> 
     <li>sub item 2-a</li> 
     <li>sub item 2-b</li> 
    </ul> 
    </li> 
</ul> 

JavaScript:

function handler(event) { 
    var $target = $(event.target); 
    if($target.is("li")) { 
    $target.children("ul").toggle(); 
    } 
} 
$("ul").click(handler).find("ul").hide(); 

Answer 1

Aby nadal korzystać z aktualnej formy, polecam korzystania closest():

function handler(event) { 
    $(event.target).closest('li').children("ul").toggle(); 
} 
$("ul").click(handler).find("ul").hide(); 

JS Fiddle demo.

Choć na własny użytek Wolałbym:

$('li').on('click', function(e){ 
    e.stopPropagation(); 
    $(this).find('ul').toggle(); 
}); 

JS Fiddle demo.

Odniesienia:

• closest().
• on().