CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ctrl_Alt_Defeat
Ctrl_Alt_Defeat

Reputation: 4009

jquery not finding class on span?

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?

Upvotes: 0

Views: 468

Answers (3)

A. N. SINHA
A. N. SINHA

Reputation: 106

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>

Upvotes: -1

Arjunlal
Arjunlal

Reputation: 154

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() {
  debugger;
});

  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() {
  debugger;
});

Upvotes: -1

patelarpan
patelarpan

Reputation: 7991

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.

Upvotes: 11

Related Questions