Javascript 父元素的Jquery选择器特定元素

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

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

或

$'ul[id=myUl]>a'。点击，做一些事情//这不起作用，因为a不是ul的直接子女

如何正确处理这个特定ul的一个元素的点击？

像这样

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

请注意，我没有使用>，这将限制您直接继承ul的子代

或者你可以这样做

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

区别在于，这将处理程序绑定到UL，但仅在单击a时触发它。第一个示例使用选择器中的>直接绑定到a.

，使其比需要的更具体。如果将其取出，则它将适用于任何级别的任何子元素，而不是直接的子元素

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

或

应该有用。

你在$'ul[id=myUl]a.中丢失了。点击，做点什么！；在$'ul[id=myUl]>a.中，点击，做一些事情！； 但您可以直接使用元素的id作为选择器：

---

$'myUl a'。单击，处理程序函数

您缺少一个报价，请尝试以下操作：

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

非常简单：

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

---

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

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

---

第二个是技术上的accurate@frshca你是什么意思？它们同样准确。是的，它们都能工作，但第二种方法更可取，因为它是委托事件处理程序的。因此，如果OP想要有多个锚，第二个方法将只附加一个事件处理程序，但将事件单击委托给锚。我想同意不同意。在我和jQuery看来，像第一个这样的层次选择器会给您带来性能上的冲击。是的，我们在这里讨论的是一个选择器，因此您可能永远不会注意到其中的差异，但是为什么不执行最佳实践呢？请阅读，这是在最后一段。我明白jQuery和你所说的，我确实误解了它的意思。我想我应该只使用第二个，因为选择器比第一个快，所以侦听器的连接速度会更快。

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

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

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