jquery没有在span上找到课程？

Question

我在网站上获得了下面的html

<a class="k-grid-filter k-state-active" href="#" tabindex="-1"><span class="k-icon k-filter"></span></a>

我正在尝试将单击处理程序附加到显示的范围但我无法获得要触发的断点？

我的javascript代码如下：

$(document).on("click", ".k-icon .k-filter", function () {
    debugger;
});

我在这里错过了什么吗？

Answer 1

删除选择器.k-icon和.k-filter

之间的空格

$(document).on("click", ".k-icon.k-filter", function () {
    debugger;
});

  

如果你在选择器之间给出空格，那么它会考虑第二个   选择作为一个孩子。

Answer 2

要将点击处理程序附加到您的范围，您可以通过以下方式执行此操作。

1. 向span元素添加ID（假设'span-id'是此处的ID）并使用ID绑定

   $('#span-id').on('click', function() {
     debugger;
   });

2. 如果您绝对想要通过组合名称进行选择，则需要指定不带空格的类名，如下所示

   $('.k-icon.k-filter').on('click', function() {
     debugger;
   });

Answer 3

您的HTML元素结构定义（除了元素之外的类）：

|-- a  .k-grid-filter .k-state-active
|   |-- span  .k-icon .k-filter

JQuery元素绑定类定义如下（嵌套lebel）：

|-- .k-icon 
|   |-- .k-filter

'.k-filter'的{​​{1}}个孩子，因此您的调试器无法在JQuery中运行。

更正JQuery代码：

'.k-icon'

＆＃13;

＆＃13;

$(document).on("click", ".k-icon.k-filter", function () {
    debugger;
});

`

＆＃13;

$(document).on("click", ".k-icon.k-filter", function () {
        debugger;
});

＆＃13;

＆＃13;

＆＃13;