jquery on 'click' не работает над сгенерированным классом

Question

Я пытаюсь добавить класс 'this', когда вы нажимаете на li, и когда вы нажимаете на класс с '.this', он не работает.

Даже если я использую метод .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

Этот снайпер должен делать трюк. Сначала вам необходимо захватить элемент ul - чтобы избежать поиска DOL для 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'); 
    }); 

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

T он обработчик не вызывается, когда событие происходит непосредственно на связанном элементе, но только для потомков (внутренних элементов)

(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/