JQuery: OnClick not working

Question

A part of my table looks somewhat like this:

<td data-item="Tier1">
     <a class="infolnk" href="#">DRAFT</a>
</td>
<td data-item="Tier2">
     <a class="deletelnk" href="#"></a>
     <a class="editlnk" href="#"></a>
     <a class="infolnk" href="#">DRAFT</a>
</td>
<td data-item="Tier3">
     <a class="deletelnk" href="#"></a>
     <a class="editlnk" href="#"></a>
     <a class="infolnk" href="#">DRAFT</a>
</td>

To handle the on-click -events, i've written the following function:

$(document).ready(function () {
     Console.log("loading Tiers");
     LoadTiers();
     Console.log("Tiers have been loaded, loading Eventhandlers");
     SetTableEventHandlers();
}


function SetTableEventHandlers() {

    $(".deletelnk").click(function ()
    { _delete($(this)); });

    $(".infolnk").click(function ()
    { _getInfo($(this)); });
}

function _delete(lnkClicked)
{
   alert("delete clicked");
   ....
}

function _getInfo(lnkClicked)
{
   alert("Info clicked");
   ....
}

Yet only the delete seems to be working. I'm not getting any alert from _getInfo. Can anyone see why?

Note: the tags with class="deletelnk" are declared on the html-page, class="infolnk" are dynamically added. Yet the setting of the event handlers occurs after they have been added dynamically.

Can you show where you trigger the event where you set the event handlers? — putvande, Jul 30 '14 at 13:05
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — emerson.marini, Jul 30 '14 at 13:06
"Yet the setting of the event handlers occurs after they have been added dynamically." Are you 100% sure that the elements are loaded before the event handlers are setup? — Richard Dalton, Jul 30 '14 at 13:08
@RichardDalton. Yes following the logging the elemens are first added and then the eventhandlers are added. — User999999, Jul 30 '14 at 13:11

score 1 · Accepted Answer · answered Jul 30 '14 at 13:04

1

event binding for dynamically added element can be done using .on, so change

$(".infolnk").click(function ()
    { _getInfo($(this)); });

to

 $("table tr").on("click",".infolnk",function ()
    { _getInfo($(this)); });

answered Jul 30 '14 at 13:04

Bhushan Kawadkar

28,279
5
35
57

Aha! Will try your option in an instant – User999999 Jul 30 '14 at 13:15
as dynamically created elements are not available after `document.ready` and hence cannot bind events using `.click`. So jQuery provided `.on('click','selector',function(){...})` for binding events. For more information see [this](http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click) – Bhushan Kawadkar Jul 30 '14 at 13:19
Apparently your right. I always assumend (obviously wrongly) that `click` worked in the same way as `on` once the elements were loaded into the `DOM`. Thanks for pointing this out! – User999999 Jul 30 '14 at 13:22

score 0 · Answer 2 · answered Jul 30 '14 at 13:07

0

You are missing closing a tags

<a class="deletelnk" href="#"></a>
<a class="editlnk" href="#"></a>
<a class="infolnk" href="#">DRAFT</a>

answered Jul 30 '14 at 13:07

Aleksandar Gajic

1,349
1
18
23

The actual tags are closed. Something must have gone wrong during the copy from firebug. – User999999 Jul 30 '14 at 13:14
then add inside these a tags, maybe they don't have width so you cannot click on them. – Aleksandar Gajic Jul 30 '14 at 13:16
@Bhushan Kawadkar was right. Dynamically added elements should be treated in another way then the one i used – User999999 Jul 30 '14 at 13:28

score -1 · Answer 3 · answered Jul 30 '14 at 13:11

-1

You can use

$(".deletelnk").click(function (){
    _delete($(this)); 
});

$(".infolnk").click(function (){
    _getInfo($(this)); 
});

function _delete(lnkClicked){
    alert("delete clicked");
}

function _getInfo(lnkClicked){
    alert("Info clicked");
}

answered Jul 30 '14 at 13:11

Mijoe

236
2
9

Thats included inside another function. So I removed that extra function. Thats all – Mijoe Jul 30 '14 at 13:13
OP calls that function to add the event handlers to both. – putvande Jul 30 '14 at 13:15
Oh.. Sorry.. I didnt see that .ready() section. Thats why I answered like that. – Mijoe Jul 30 '14 at 13:16

JQuery: OnClick not working

3 Answers3