jQuery Append events issue

Question

Я пытаюсь создать практичный карточный дизайн, и я застрял в анимации добавления в руку. На этот раз я подумал, что использование append и добавление четных обработчиков будет работать, но оказалось, что он работает только для последнего добавленного элемента (в данном случае li). вот код на jsfiddle для облегчения тестирования ..

Код:

$('.deck .card').on('click', function() { 
    // $(this).appendTo('.hand') 
    $('.hand').append(this) 
    $('.hand .card').on('click', function(){ 
     $(this).addClass('flip') 
    }) 
}) 

Я попытался переместить событие щелчка для руки вне палубы, но это не работает. также, вот код в jsfiddle для более легкого тестирования http://jsfiddle.net/FAZUc/9/

спасибо.

Answer 1

Удалите событие щелчка с элемента, щелкнувшего элемент, а затем добавьте новое событие click только в элемент с щелчком.

$('.deck .card').on('click', function() { 
    // $(this).appendTo('.hand') 
    $('.hand').append(this) 
    $(this).off('click').on('click', function(){ 
     $(this).addClass('flip') 
    }) 
}) 

http://jsfiddle.net/FAZUc/16/

делегация событий делает его еще проще.

$('.deck').on('click', '.card', function() { 
    $('.hand').append(this) 
}); 
$('.hand').on('click','.card', function(){ 
    $(this).addClass('flip') 
}); 

http://jsfiddle.net/FAZUc/18/