jQuery的跨度找不到类？

Question

I get the html below rendered on my webesite

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

I am trying to attach a click handler to the span that is displayed but I cannot get the break-point to hit?

My javascript code is below:

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

Is there something I have missed here?

Answer 1

remove space between selector .k-icon and .k-filter

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

if you give space between selector then it considers the second selector as a child.

Answer 2

To attach a click handler to your span, you can do it the following way.

1. Add an ID to the span element (assume 'span-id' is the ID here) and bind using an ID

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

2. In case you absolutely want to select by combination of class names, you need to specify the classnames without spaces, as follows

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

Answer 3

Your HTML ELEMENTS STRUCTURE define ( classes place besides elements) :

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

And JQuery elements binding Classes define below(nesting lebel) :

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

class '.k-filter' child of '.k-icon' , so your's debugger not working in JQuery.

Correct JQuery Code :

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

`

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="k-grid-filter k-state-active" href="#" tabindex="-1"> <span class="k-icon k-filter">debugger</span> </a>