Question

addEventListener()无效？

var mytable = document.getElementById('GridTable');

for (var r = 0; r <rows; r++) 
{
    var row = mytable.insertRow(r);
    for (var c = 0; c <cols; c++)
    {

        var cell=row.insertCell(c);
        cell.id='td'+nn;
        //alert(cell.id);
        cell.innerHTML='&nbsp';
        cell.className="dynamic";
        cell.addEventListener("click", function() {bcolor1('red',cell.id);});
        nn++;
    }

}

Answer 1

您需要使用事件委派来实现此目的。

使用Javascript，您可以这样做：

document.querySelector('element').addEventListener('click', function(event) {      
    // on click action here..
});

使用jQuery，您可以这样做：

$(document).on("click", "element", function(){
  // on click action here..
});

了解详情：Understanding Event Delegation | jQuery

Answer 2

您可以使用on()功能来实现事件委派。

这样，您可以选择每个带有类.dynamic

的动态添加元素

$(document).on('click', '.dynamic', function() {
    var that = $(this);
    that.css({'background-color': 'red'});
    // do your stuff here ..
});

Answer 3

我得到了以下解决方案，它运行正常。

 var mytable = document.getElementById('GridTable');
 for (var r = 0; r <trow; r++) 
    {
        temp=noc;
        var row = mytable.insertRow(r);
        for (var c = 0; c <tcol; c++)
        {
            cell=row.insertCell(c);
            cell.id='td'+temp;
            cell.style.width =cwidth;
            cell.style.height =cheight;
            //alert(cell.id);
            //cell.innerHTML='&nbsp;';
            cell.className="dynamic";

            with ({ n: cell.id }) 
            {
                cell.onclick = function()
                {
                        bcolor1('red',n);
                };
                cell.onmousemove=function()
                {
                    bcolor('red',n);
                }   
            }                                                         
            temp++;
        }
        noc=noc-tcol;
    }

Javascript-将click事件添加到动态生成的表格单元格中

3 个答案: