Selecting dynamically inserted HTML elements to change a simple CSS rule

Question

I currently have a code that lets me "check" table cells, but the ones I create dynamically, don't apply to this.

$("td").click(function(){
        $(this).toggleClass("active");
    });

This code works great for static elements, but when I create one element...:

$("#boton").click(function(){
    var object = {
        name : $("#nombre").val(),
        dni : $("#dni").val(),
        telefono : $("#telefono").val()
    };

    if(count<5){
        count++;
        $("#tabla").append("<tr><td>"+object.name+"</td><td>"+object.dni+"</td><td>"+object.telefono+"</td>");
    }else{
        $("#boton").hide();
        alert("You added too much elements!");

    }

... that element is not selectable. The event doesn't fire for it. How can I change this?

Possible duplicate of Event binding on dynamically created elements? — guradio
– guradio, Commented Apr 13, 2016 at 10:31

Moob · Accepted Answer · 2016-04-13 10:28:59Z

2

In order to detect clicks on current and future instances you need to delegate the event to an element that does exist (eg the body):

$("body").on("click","td",function(){
    $(this).toggleClass("active");
});

edited Apr 13, 2016 at 10:28

answered Apr 13, 2016 at 10:25

Moob

16.5k1 gold badge40 silver badges54 bronze badges

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

Comments

pguetschow · Accepted Answer · 2016-04-13 10:28:18Z

1

You need to change te first line of your function:

$("body").on("click","td",function(){

answered Apr 13, 2016 at 10:28

pguetschow

5,3577 gold badges35 silver badges47 bronze badges

Collectives™ on Stack Overflow

Selecting dynamically inserted HTML elements to change a simple CSS rule

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related