Onclick, динамически добавляемый с javascript к элементу td, не работает

Question

Onclick, динамически добавляемый с javascript к элементу td, не работает

0

У меня проблема с попыткой выяснить, почему мое динамически добавленное событие onclick ничего не делает. Я уже много раз искал сайты, но ничего не пробовал. Зная, что это, наверное, какая-то глупая ошибка, но я действительно хочу знать, что я сделал не так. Это часть моего кода, включая соответствующие функции:

        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);
            }

        }

Создание таблицы отлично работает и вызывает функцию ChangeNumber() из статически созданного onclick, но когда я нажимаю на динамически созданный тд, ничего не происходит. Может кто-нибудь прояснить мне эту проблему?

Johhny-T 19 окт. 2013, в 22:29

Источник

0

td.setAttribute ( 'OnClick', "youfunction ()");
Shadow 19 окт. 2013, в 20:06
0

В дополнение к моему ответу, вот еще один совет. Если вы щелкнете правой кнопкой мыши по элементу, скажем, в Google Chrome, и скажете «Проверить элемент», или просто просмотрите исходный код страницы, вы можете проверить, как выглядел сгенерированный TD. Было бы пропустить атрибут «onclick».
Zlatko 19 окт. 2013, в 20:19

Теги:

javascript

html

html-table

dynamic

onclick

5 ответов

Ещё вопросы

В дополнение к моему ответу, вот еще один совет. Если вы щелкнете правой кнопкой мыши по элементу, скажем, в Google Chrome, и скажете «Проверить элемент», или просто просмотрите исходный код страницы, вы можете проверить, как выглядел сгенерированный TD. Было бы пропустить атрибут «onclick».

struthersneil · Answer 1 · 2013-10-19T19-24-00.000Z

Быстрый JSFiddle показывает, что основной подход является тонким --at наименее в 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);
}

Что-то еще должно быть сломано. (Попробуйте запустить Firebug или аналогичный и искать JS-ошибки в консоли.)

Mr.YellowMan · Answer 2 · 2016-03-22T06-20-00.000Z

Вы также можете использовать:

td.onclick = ChangeNumber;

ChangeNumber - это функция, которая также может быть привязана к клику, если вы разместите эту функцию внутри, вы можете создать пользовательскую функцию для каждого onclick.

Я знаю, с какими проблемами он сталкивается, и это просто, что функция onclick не poppup, она не показывает никаких журналов, и если вы используете td.onclick = ChangeNumber(); то он просто запускает эту функцию один раз при загрузке этого скрипта,

это работает. мы можем также передать аргумент. Вот пример: td.onclick = ChangeNumber (объект);

Ashok Kumar Gupta · Answer 3 · 2013-10-19T19-51-00.000Z

Ваш подход кажется прекрасным, PLS найти здесь: (jsfiddle.net/fa9SV/)

Пожалуйста, просто перекрестно проверьте, что все идентификаторы существуют в документе. Надеюсь это поможет!

AVP · Answer 4 · 2013-10-19T17-33-00.000Z

Вы должны настроить onclick как атрибут. Итак, вместо

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

вам нужно что-то вроде

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

Zlatko · Answer 5 · 2013-10-19T17-23-00.000Z

При создании элемента HTML вы должны использовать setAttribute для его установки. Кроме того, вам понадобится сделать эту строку.

Итак, что-то вроде:

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

В качестве альтернативы вы можете сделать следующее:

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

Затем определите свой скрипт где-нибудь на своем глобальном объекте, например:

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

Третий вариант - использовать библиотеку событий. Тогда вы сможете сделать что-то вроде:

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

Проверьте этот вопрос, чтобы понять, что я имею в виду.

PS Это вне сферы действия этого вопроса, но лучше не связывать вещи с глобальным объектом. Используйте модуль или что-то в этом роде.

данное решение не работает. он говорит, что "changeSomething" не определен
Сделали ли вы Then define your script somewhere on your global object, like this: step?