Question

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

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

所以，我想为<a>的{{1}}标记定义点击处理程序，其ID为ul

我尝试过像css选择器这样的东西：

"myUl".

或

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

仅仅点击此特定ul的{{1}}元素的正确方法是什么？

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!);中但你可以直接使用元素的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

Jquery Selector父级的特定元素

7 个答案: