Javascript- Adding click event to dynamically generated cell of table

Question

addEventListener() not working ?

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

}

Please post all the relevant code(with your HTML). The function bcolor1('red',cell.id) is missing. — Weafs.py
– Weafs.py, Commented Jan 23, 2015 at 9:34
you've tagged jquery but have none in your example, are you using jquery? — atmd
– atmd, Commented Jan 23, 2015 at 9:35
bcolor1('red',cell.id); is my function which apply background color to clicked cell. When I try to execute this code and click on any cell it is applying red color to only last cell of table, am totally confused plz help me ...... — Kuldeep More
– Kuldeep More, Commented Jan 23, 2015 at 10:34

Rahul Desai · Accepted Answer · 2015-01-23 09:34:42Z

1

You need to use event delegation to achieve this.

With Javascript, you can do it this way:

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

With jQuery, you can do it this way:

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

Learn more: Understanding Event Delegation | jQuery

answered Jan 23, 2015 at 9:34

Rahul Desai

15.5k20 gold badges89 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kapantzak · Accepted Answer · 2015-01-23 09:34:14Z

0

You can use on() function to achieve event delegation.

This way, you can select every dynamicaly added element with class .dynamic

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

answered Jan 23, 2015 at 9:34

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

1 Comment

briosheje Over a year ago

informative purpose: double semicolon, syntax, line 2: var that = $(this;); should be var that = $(this);

Kuldeep More · Accepted Answer · 2015-01-28 10:22:42Z

I got the following solution and it is working fine .

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

Collectives™ on Stack Overflow

Javascript- Adding click event to dynamically generated cell of table

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related