父级的jQuery选择器特定元素

Question

我正在构建一个菜单，看起来像这样：

<ul id="myUl">
    <li><span>li #1</span>
        <ul>
            <li>
                <div class="myContent">
                    <a href="" name="myLink">clickMe!</a>
                </div>
            </li>
    </li>
</ul>

因此，我想为id为"myUl".的ul的<a>标记定义一个单击处理程序"myUl".

我尝试了类似CSS选择器的方法：

$('ul[id="myUl] a').on('click', do stuff!);

要么

$('ul[id="myUl] > a').on('click', do stuff!); //这不起作用，因为a不是ul的直接子代。

处理此特定ul的a元素的点击的正确方法是什么？

Answer 1

像这样。

$('#myUl a').on('click', your_func);

请注意，我没有使用> ，后者将您限制为ul直接后代（子代） 。

或者您可以这样做。

$('#myUl').on('click', 'a', your_func);

不同之处在于，这会将处理程序绑定到UL，但仅在单击a时触发它。 第一个示例直接绑定到a 。

Answer 2

很简单：

$('#myUl').on('click', 'a', do stuff!);

Answer 3

在选择器中使用>使其比需要的更加具体。 如果将其取出，则它将适用于任何子元素（在任何级别），而不是直接子元素。

$(document).ready(function() {
    $('ul#myUl a').click(function() {
        // do stuff
    });
});

Answer 4

$('ul#myUl a').on('click', do stuff!);

要么

$('ul[id="myUl"] a').on('click', do stuff!);

应该管用。

Answer 5

您在$('ul[id="myUl"] a').on('click', do stuff!);和$('ul[id="myUl"] > a').on('click', do stuff!);但是您可以直接使用element的id作为选择器：

$('#myUl a').on('click', handler function);

Answer 6

您缺少引号，请尝试以下操作：

$('#myUl a').on('click', function(){alert('do stuff!')});

Answer 7

您还可以在选择器中指定上下文

$('a','#myUl').click
//  This is equivelant to $('#myUl').find('a')
//  So this finds all descendant anchor tags of #myUl