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");
});

一旦动态添加了一列，我的问题就出现了，当单击该单元格时，.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

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

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

Answer 3

这是选择器问题，您应该在通用选择器上操作

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

Answer 4

使用事件委派

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

Jquery .on（）不会触发toggleClass函数

4 个答案: