Onclick dynamically added with javascript to td element doesn't work

Question

I have a problem trying to figure out why my dynamically added onclick event doesn't do anything. I have searched many sites already but nothing I tried worked. Knowing myself it is probably some kind of stupid mistake but I really want to know what I did wrong. This is a part of my code including relevant functions:

        function ChangeNumber(line){   //this is just a test function so far :)
            document.getElementById('maincol').innerHTML += line + "<br/>"; //just adds "something to the end of a div"
        }

        function ChangeSize()
        {
            var rows, cols;
            rows = document.getElementById('rows').value;
            cols = document.getElementById('cols').value;

            var tbody = document.getElementById('model');
            tbody.innerHTML = "";

            for (var i = 0; i < rows; i++){
                var tr = document.createElement('tr');
                for (var j = 0; j < cols; j++){
                    var td = document.createElement('td');
                    td.setAttribute('name', (i * cols) + (j + 1));
                    td.onclick = function() {ChangeNumber('something'); };
                    td.innerHTML = "0";
                    tr.appendChild(td);
                }
                tbody.appendChild(tr);
            }

        }

The creation of the table works fine and so does call to the function ChangeNumber() from statically created onclick but when I click on the dynamically created td nothing happens. Can someone please clarify the problem to me?

Answer 1

A quick JSFiddle shows that the basic approach is fine --at least in Chromium.

tbody_x = document.getElementById('x');
tbody_x.innerHTML = '';

for (row = 0; row < 5; row++)
{
  tr = document.createElement('tr');

  for (col = 0; col < 10; col++) 
  {
    td = document.createElement('td');
    td.setAttribute('name', 'r' + row + 'c' + col);
    td.onclick = function() { ChangeNumber('hi'); };
    td.innerHTML = '0';
    tr.appendChild(td);
  }

  tbody_x.appendChild(tr);
}

Something else must be broken. (Try firing up Firebug or similar and look for JS errors in the console.)

Answer 2

You could also use:

td.onclick = ChangeNumber;

the ChangeNumber is a function that could also be bind to the click, if you place this function inside you could make a custom function for each onclick.

I know what problem he's facing and it just that the onclick function wont poppup, it doesn't show any logs and if you use the td.onclick = ChangeNumber(); then it would just fire this function once when loading this script,

Answer 3

You have to set up the onclick as an attribute. So, instead of

td.onclick = function() {ChangeNumber('something'); };

you would want something like

td.setAttribute('onclick', "function() {ChangeNumber('something');}");

Answer 4

When creating a HTML element, you have to use setAttribute to set this. Additionally, you'll have to make this a string.

So, something like:

td.setAttribute('onclick', 'function(){change("Something")}');

Alternatively, you can put it like this:

td.setAttribute('onclick', 'changeSomething();');

Then define your script somewhere on your global object, like this:

changeSomething = function() {
// do the change
}

The third option is to use an event library. Then you'd be able to do something like:

Event.on(td, 'click', changeSomething);

Check out this question to see what I mean.

PS It's out of scope of this question, but better not bind stuff on global object. Use a module or something.

Answer 5

Your approach seems to be fine, pls find here: (jsfiddle.net/fa9SV/)

Please just crosscheck that all IDs exist within document. Hope this helps!