javascript - Jquery .on（）不触发toggleClass函数

Question

我正在使用 JS/Jquery 将单击时动态添加到具有类似类名的表中的列，如下所示

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

然后，一旦动态添加一列，单击每个单元格时，我有一个 toggleClass() 函数来切换 css add_week_bg 类函数以显示它被标记如下所示

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

一旦动态添加了 a 列，我的问题就会出现，并且当单击该单元格时， .on() 不会触发。

这是一个 JSFiddle http://jsfiddle.net/aqW6a/

先感谢您。

Answer 1

您需要事件委托（因为 .highlight 被动态添加）

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

演示------> http://jsfiddle.net/aqW6a/1/

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

Answer 2

使用事件委托

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

Answer 3

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

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

Answer 4

这是一个选择器问题，您应该对通用选择器进行操作

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