Question

我试图添加一个＆＃39;这个＆＃39;当你点击一个li时，当你点击一个带有＆＃39;。这个＆＃39;它不起作用。

即使我使用.on方法，它也不起作用。我错过了什么？这让我发疯了。

var thisLi = $('ul li');

$('li').on('click', function() {
    $(thisLi).removeClass('that');
    $(thisLi).removeClass('this');
    $(this).addClass('this');
});


$('li.this').on("click", "li.this", function() {
    $(this).addClass('that');
 });

http://jsfiddle.net/zfda8145/2/

Answer 1

使用事件委托。因为正常事件绑定不会将事件绑定到将来的元素。为此，您需要将事件绑定到特定父级。我在这里使用document

$(document).on("click", "li.this", function() {
    $(this).addClass('that');
 });

Answer 2

这个snipplet应该可以解决问题。首先，您需要获取ul元素 - 以避免搜索shole DOM for ul。其次，您在其click元素上应用var thisLi = $('ul li'); var list = $('ul'); list.on('click','li', function() { $(thisLi).removeClass('that'); $(thisLi).removeClass('this'); $(this).addClass('this'); }); list.on('click','li.this', function() { $(this).addClass('that'); });事件：）

{{1}}

Answer 3

试试这个：

    var thisLi = $('ul');

    $('li').on('click', function() {
        $(thisLi).removeClass('that');
        $(thisLi).removeClass('this');
        $(this).addClass('this');
    });


    $(thisLi).on("click","li.this", function() {
        $(this).addClass('that');
     });

Working DEMO

Answer 4

你可以做那样的事情：

var thisLi = $('ul li');

$('li').on('click', function() {
    if(this.className!=='this'){
    $(thisLi).removeClass('that');
    $(thisLi).removeClass('this');
    $(this).addClass('this');
    }else{
       $(this).addClass('that');
    }
});

Answer 5

当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于后代（内部元素）

（https://api.jquery.com/on/）

当你改变这个

时它会起作用

$('li.this').on("click", "li.this", function()

到此：

$(document).on("click", "li.this", function()

在此逻辑中，您实际上确定了可以发生click事件的范围。如果您使用$('li.this').on()，则仅针对click的后代考虑li.this个事件，但li.this不存在后代。

Answer 6

我认为问题在于，当你点击this.li时，它会触发这两个函数，首先删除类，然后不执行因为类已经消失。

我把它重写为一个函数，它执行类检查而不是单独的函数。我真的不喜欢这个，但是如果你被困住它会让你去。

$('li').on('click', function() {    

    if ($(this).hasClass('that')) {
        $(this).removeClass('that');        
    } else if ($(this).hasClass('this')) {
        $(this).addClass('that');
        $(this).removeClass('this');
    } else {
        $(this).addClass('this');
    }

});

这是一个工作小提琴 - http://jsfiddle.net/zfda8145/24/

'click'上的jquery不能处理生成的类

6 个答案: