Question

我有一些jQuery导致我现在有点头疼。这一切都归结为选择器的工作方式。

我有以下形式的HTML：

<div id="master">
    <div class="row">
        <div class="medium-6 columns">
            <div class="medium-6 right columns">
                <div class="pagerContent">
                    <div class="pagination">
                        <div class="page">
                            <ul>
                                <li>
                                    <a href="#">
                          ......
etc.

其中包含来自导航部分的一堆锚标记。

如果我使用以下jQuery。

$('#master').on('click', '.pagination a', function (event) {

    -- code --

});

它有效，但如果我使用

$(".pagination a", "#master").on('click', function (event) {

    -- code --

});

没有。

Answer 1

你的两个例子略有不同。

这，使用延迟事件处理。

$('#master').on('click', '.pagination a', function (event) {

    -- code --

});

基本上click由#master处理，只有当被点击的元素与选择器.pagination a匹配时才会触发。这种方式适用于在DOM加载后动态地将任何子/后代添加到页面。

这个，不是：

$(".pagination a", "#master").on('click', function (event) {

    -- code --

});

它将click事件直接附加到匹配#master＆＃34;的.pagination a后代。因此要求在附加处理程序时元素存在于DOM中。

Answer 2

嗨，谢谢大家回答不是这个。我仍然难以让这个工作，所以我尝试了一种对我有用的不同方式。

对于每个链接标记，我已将特定类定义为标识符，所以

<a href="#"></a>

成了

<a href="#" class="myFirstLink"></a>

然后使用

$(document).on("click", "myFirstLink", function (event) {
        alert("Hi," + event.target.href + " clicked");
    });

我现在能够处理链接。

jQuery选择器不匹配元素

2 个答案: