jQuery .on（）不触发toggleClass函数

Question

I'm dynamically adding a column on click to a table with a similar class name with JS/Jquery as show below

$("#btn").click(function(){
    $('#week_title').append('<th>Week '+count+'</th>');
    count++;
    $('.tag').append('<td class="highlight"><img src="plus.png"></td>');
});

Then once a column is dynamically added, on click on each cell I have a toggleClass() function to switch a css add_week_bg class function to display it being marked as show below

$(".highlight").on("click", function(){
    console.log('clicked')
    $(this).toggleClass("add_bg");
});

My issue comes in to play once the a column has been dynamically added, and when that cell is clicked the .on() doesn't trigger.

Here is a JSFiddle http://jsfiddle.net/aqW6a/

Thank you in advance.

Answer 1

You need event delegation ( as .highlight being added dynamically )

$('.tag').on("click",".highlight", function(){
    console.log('clicked')
    $(this).toggleClass("add_bg");
});

Demo ------> http://jsfiddle.net/aqW6a/1/

• http://learn.jquery.com/events/event-delegation/

Answer 2

Try http://api.jquery.com/on/

$('.tag').on("click", ".highlight",function(){
    console.log('clicked')
    $(this).toggleClass("add_bg");
});

Answer 3

It's a selector problem, you should operate over a generic selector

$(document).on("click",".highlight", function(){
    console.log('clicked')
    $(this).toggleClass("add_bg");
});

Answer 4

Use event Delegation

$(".tag").on("click",'.highlight', function () {
    console.log('clicked')
    $(this).toggleClass("add_bg");
});