JavaScript equivalent for jQuery .on() with additional selector

Question

Here is JSFiddle exapmle: https://jsfiddle.net/1a6j4es1/1/

$('table').on('click', 'td', function() {
    $(this).css('background', 'green');
});

How can this code be rewritten in plain JavaScript?
Callback function should work even for new td elements inside the table element.

Update: I found out a very short and clean solution: https://jsfiddle.net/1a6j4es1/28/

function delegateSelector(selector, event, childSelector, handler) {

    var is = function(el, selector) {
      return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
    };

    var elements = document.querySelectorAll(selector);
    [].forEach.call(elements, function(el, i){
        el.addEventListener(event, function(e) {
            if (is(e.target, childSelector)) {
                handler(e);                
            }
        });
    });
}

delegateSelector('table', "click", 'td', function(e) {
    e.target.style.backgroundColor = 'green';
});

score 0 · Answer 1 · answered Apr 06 '15 at 16:34

0

Add an ID to the element you wish to click on, and use this code:

document.getElementById("tableId").addEventListener("click", function(e){
e.target.style.background = 'green';
});

answered Apr 06 '15 at 16:34

Eyal

532
2
12

2

what if there is a span or div inside a td? – charlietfl Apr 06 '15 at 16:36
@charlietfl what do you want to do with them? – Eyal Apr 06 '15 at 16:42
1

would want the parent `` to change not the children. `target` might not be the ` – charlietfl Apr 06 '15 at 16:43
@charlietfl then instead of e.target, use document.getElementById("tableId") and you will get the specific element you want – Eyal Apr 06 '15 at 17:08
that would change the whole table not a single `td`. What is needed is to walk up the dom from target and test for `td`. Current solution oversimplifies the situation – charlietfl Apr 06 '15 at 17:09
@charlietfl document.getElementById("tableId").addEventListener("click", function(e){ if( e.target.nodeName == "TD" ){ e.target.style.background = 'green'; } }); – Eyal Apr 06 '15 at 17:21
updated code: https://jsfiddle.net/1a6j4es1/19/ – Eyal Apr 06 '15 at 17:22
still the same problem if `target` is a child node and isn't actually the `td` https://jsfiddle.net/1a6j4es1/20/ – charlietfl Apr 06 '15 at 17:23
@charlietfl You can recursively lookup the parent tree. this should work: https://jsfiddle.net/1a6j4es1/21/ – Eyal Apr 06 '15 at 17:43
now you are onto something – charlietfl Apr 06 '15 at 18:32

score 0 · Accepted Answer · answered Apr 06 '15 at 16:41

0

<table id="clickable" onclick="changecolor(this)" border=1>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<script>
    function changecolor(table)
    {
     document.getElementById("clickable").addEventListener("click",tableClicked);
      function tableClicked(e) {
       e.target.style.backgroundColor = 'green';
     }
    }
</script>

This worked for me ..

answered Apr 06 '15 at 16:41

Jaivik

39
5

Doesn't work when one of the cells contains child elements. Or when there are `` cells. – Bergi Apr 06 '15 at 16:55
1

I fixed the solution: https://jsfiddle.net/1a6j4es1/27/ – Dmitry Apr 07 '15 at 02:23

JavaScript equivalent for jQuery .on() with additional selector

2 Answers2