Using Jquery to change class on dynamic generated element

Question

I have a script that dynamically generates a grid by using a table.

//createGrid(height, width);
createGrid(1, 2);
//one row with 2 cols

Which creates this:

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

I need an onclick event for the td tags that add/changes their class. I've tried a few solutions to no avail. Any ideas? I'm not great at Jquery.

i doubt you tried anything.. if you typed your question into google, you would have the answer right away -> see — Michal Klouda
– Michal Klouda, Commented Oct 27, 2012 at 20:55
possible duplicate of Can't click on the table created with jquery — Ram
– Ram, Commented Oct 27, 2012 at 21:05

Ram · Accepted Answer · 2012-10-27 20:57:38Z

4

For dynamically-generated elements, events should be delegated, from one of static parents of the element or document object, you can use on method:

$(document).on('click', 'td', function(){
   $('.selected').removeClass('selected');
   $(this).addClass('selected')
})

answered Oct 27, 2012 at 20:57

Ram

145k16 gold badges174 silver badges201 bronze badges

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

Comments

kinduff · Accepted Answer · 2012-10-27 20:59:43Z

0

Another alternative using find, live and toggleClass

$("table").find("td").live("click", function() {
    $(this).toggleClass("selected");
});

JsFiddle

answered Oct 27, 2012 at 20:59

kinduff

1412 silver badges10 bronze badges

1 Comment

Ram Over a year ago

As of jQuery 1.7 live method is deprecated.

Adil · Accepted Answer · 2013-12-17 16:48:42Z

0

You can use on jquery function for binding the dynamically generated item for event delegation, It binds the existing elements with event and It will also bind element which are added dynamically. $('td').click(function(){}); will only bind the existing element but not the added dynamically after he binding.

$(document).on("click", "td", function(){
     alert("clicked");
});

Delegated events

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers, reference.

You can change document with some parent element selector.

edited Dec 17, 2013 at 16:48

answered Oct 27, 2012 at 20:52

Adil

148k25 gold badges217 silver badges207 bronze badges

3 Comments

Blender Over a year ago

I'd add in why this differs from $('td').click().

Adil Over a year ago

I did as he requires for dynamically generated elements

Blender Over a year ago

I mean, explain how this is different and why you would use this instead of the regular .click() handler.

Collectives™ on Stack Overflow

Using Jquery to change class on dynamic generated element

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related