Adding event listener to an element via its class not working

Question

I have the following HTML:

And I want to add an event listener for the a element, the one with class k-link. I have several other k-link elements on the page so I will want this specific one.

However, I started by trying to add an event listener to the k-link class, but without success. When I get this, I will then try to add the event listener only to this specific one.

$(document).ready(function () {
    $(".k-link").click(function () {
        alert("Handler for .k-link called.");
    });

    $(".k-link").on("click", function () {
        alert("Handler for .k-link called.");
    });
});

But none of these work. I searched and found this question but the answers there won't work on my case.

So are these anchors dynamically added to the DOM? Are they part of content iframe? Anyway, you have to provide minimalistic sample replicating your issue because at the moment, nothing explain it... — A. Wolff, Feb 10 '16 at 11:24
These links are added dynamically and not content of an iFrame. I would love to provide a sample that replicates the issue but I can't — chiapa, Feb 10 '16 at 11:25
So try delegating it: `$(document).on("click", ".k-link", function () { alert("Handler for .k-link called."); });` That's said, we shouldn't have to ask if elements are added dynamically, it should be in question itself... — A. Wolff, Feb 10 '16 at 11:26
if you want it only for the a tag, you should use: $("a.k-link").on("click",function(){//DoSomething}); — J0N3X, Feb 10 '16 at 11:26
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Rajesh, Feb 10 '16 at 11:26
BTW, your HTML markup is invalid, a `span` cannot contains `ul` element — A. Wolff, Feb 10 '16 at 11:31
@chiapa Sorry but i told it because your posted link in question was refering to delegate event, so strange you didn't test it before... — A. Wolff, Feb 10 '16 at 11:36
@A.Wolff, I didn't know about delegate and other type of events. Anyway, I think there may be some wrong syntax on my code — chiapa, Feb 10 '16 at 11:38
Your js/jq syntax is correct. Just you shouldn't set a block element `ul` as decendant of a `span`, use `div` instead of `span`. Now is your issue fixed or not? And again, sorry if you found any of my previous comment rude or agressive. — A. Wolff, Feb 10 '16 at 11:40
It is not. As for the HTML structure, it comes from Kendo UI like that, I don't write it myself. It's ok, just bear in mind that not everyone knows everything and making mistakes is in our essence — chiapa, Feb 10 '16 at 11:42

pharkasbence · Answer 1 · 2016-02-10T14:42:17.707

If the other k-link classes are not a elements:

$("a").find(".k-link").eq(0).click(function() { ... });

If you want to select the k-link element inside the second li:

$(".k-pager-numbers").eq(0).find("li").eq(1).find(".k-link").eq(0).click(function() { ... });

If there is only one k-link element you can use this:

$(".k-link").eq(0).click(function() { ... });

And if you have more k-link, and want to define click handler for each, then use this:

$(".k-link").each(function() {
    $(this).click(function () {       
         ...
    });
});

Adding event listener to an element via its class not working

1 Answers1