Замените класс div другим классом событиями. JQuery

Question

Я хочу изменить класс Div с помощью другого класса с его событиями, у меня есть это:

<ul class="pants"> 
<li><a href="#" ><img src="images/1.png" alt="a" /></a></li>  
<li><a href="#" ><img src="images/2.png" alt="b" /></a></li> 
</ul> 
<ul class="tshirts"> 
<li><a href="#" ><img src="images/3.png" alt="a" /></a></li>  
<li><a href="#" ><img src="images/4.png" alt="b" /></a></li> 
</ul> 

JQuery:

$('.tshirts a').click(function(){ 
Alert('This is a pant'); 
}); 

я использовал это, чтобы изменить класс:

$('.pants').attr('class','tshirts'); 

имя класса изменено, но когда я нажимаю на список, он не отображает предупреждение. поэтому это событие не возникает с помощью этого. Может кто-то помочь. Спасибо вам всем.

Answer 1

Поскольку вы используете событие click, это привяжет элемент к загрузке страницы.

При обновлении имя класса, вам нужно будет связать события нажатия на эти элементы также:

$(document).on('click', '.tshirts a', function(e) { 
    // Do stuff here 
}); 

Answer 2

Вы должны иметь событие, чтобы быть делегированы к статическому родителя или документа:

$(document).on('click', '.tshirts a', function(){ 
    // alert code 
}); 

Поскольку атрибут в dom был изменен после того, как dom готов, и событие, связанное с готовностью doc, не будет доступно для этого элемента, поэтому вместо этого вы должны делегировать его ближайшему статическому родительскому элементу или самому документу.

и вместо того, чтобы изменить значение атрибута вы можете добавить/удалить имена классов с этим:

$('.pants').toggleClass('pants tshirts');