javascript - jQuery 选择器不匹配元素

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.

其中包含一堆来 self 的导航部分的 anchor 标记。

如果我使用以下 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 事件直接附加到“与 .pagination a 匹配的 #master 的后代”，因此要求元素存在当附加处理程序时在 DOM 中。