Clickable second td of the table not working

Question

There is a table with tbody id of: table_tbody I am trying to add 10 rows with clickable second td in jquery. I have created one variable: element which is the <tr> row with included <td>s.

This is the part of the code.

for (var ind = 0; ind < 10; ++ind) {
   var elem = element.clone();
   elem.children().next().first().attr("id", "table_td" + ind.toString());
   $("#table_td" + ind.toString()).click({playerID: 0}, playerFunc);
   $('#table_tbody').append(elem);
}

As you see I am setting unique id for each row's second td. Then I am connecting to it the click event. However the click event is not firing after I click on it. No errors are shown.

Am I doing it incorrectly?

EDIT: Link to JSFiddle

Please show your `element` variable and how looks your HTML initially before you start the cloning... — Roko C. Buljan, Jun 23 '13 at 08:36
`$("#table_td"+ i).click({playerID: 0}, playerFunc);` what's this `playerID: 0` supposed to do? — Roko C. Buljan, Jun 23 '13 at 08:54
I wanted to pass parameter to playerFunc so that I know the ID of player of whose info is showed in the row. (now it is zero but in future it will be calculated some way) — maximus, Jun 23 '13 at 08:59
This won't solve your problem, but you [might want to](http://stackoverflow.com/questions/5874652/prop-vs-attr) look at using `prop()` instead of `attr()`. — zsawyer, Jun 23 '13 at 09:04

score 3 · Accepted Answer · answered Jun 23 '13 at 08:54

3

You messed up the instruction sequence a bit;)

$("#table_td" + ind.toString())

looks for the element in the DOM tree and it doesn't find it, since you haven't added it yet. You need to append the element first, and then you can add the event listener. This should work:

for (var ind = 0; ind < 10; ++ind) {
  var elem = element.clone();
  elem.children().next().first().attr("id", "table_td" + ind.toString());
  $('#table_tbody').append(elem);
  $("#table_td" + ind.toString()).click({playerID: 0}, playerFunc);
}

answered Jun 23 '13 at 08:54

xjedam

1,026
12
15

1

That is dead on imo. `elem.find("#table_td" + ind.toString());` is a direct alternative since it searches the yet temporary, cloned DOM-element. – zsawyer Jun 23 '13 at 09:01
Sorry, did not see the edit with JSFiddle. Like @Roko mentioned playerFunc definition is out of scope - move it before the for loop and it should work – xjedam Jun 23 '13 at 09:41

score 3 · Answer 2 · answered Jun 23 '13 at 09:16

The ideal way is to use class instead of id.

for (var ind = 0; ind < 10; ++ind) {
   var elem = element.clone();
   elem.children().next().first().attr("class", "table_td");       
   $('#table_tbody').append(elem);
}

$(document).on('click', '.table_td', function(){
    playerFunc();
});

Please see this: http://jsfiddle.net/JSWorld/ahzzK/6/

score 2 · Answer 3 · answered Jun 23 '13 at 09:09

2

See this:

example

playerFunc was not defined on for.

function playerFunc (){
    alert("hren" + this.playerID);
}

answered Jun 23 '13 at 09:09

zoh

175
3
13

score 1 · Answer 4 · answered Jun 23 '13 at 08:55

Simply the Question what was first on earth .. egg or chicken

for (var ind = 0; ind < 10; ++ind) {
  var elem = element.clone();
  elem.children().next().first().attr("id", "table_td" + ind.toString());
  $('#table_tbody').append(elem);
  $("#table_td" + ind.toString()).click({playerID: 0}, playerFunc);
}

Roko C. Buljan · Answer 5 · 2013-06-23T09:02:33.307

No need for .toString() when you actually already add to string "string"+ num
Use the .on() method with delegation for dynamically generated elements,
No need to create click handlers inside the for guy
Target every 2nd element using :odd selector.

http://jsfiddle.net/ahzzK/4/

$(document).ready(function() {

    var playerFunc = function() { // Function scope!
        alert("hren");
    }


    var element = $("<tr>")
              .append( $("<td />", {"text":"bla1"}) )
              .append( $("<td />", {"text":"bla2"}) );

    for (var i=0; i<10; i++) {
       var elem = element.clone();
       elem.children().next().first().attr("id", "table_td"+ i );
       $('#table_tbody').append(elem);
    }

    $("#table_tbody").on('click', 'td:odd', playerFunc );

});

What if I want only the second to be clickable and there are more than one s in the row? — maximus, Jun 23 '13 at 09:09

Clickable second td of the table not working

5 Answers5