jQuery анимация и привязка

Question

У меня есть jQuery, который динамически создает элемент span с определенной формой, определяемой css. Элементы span генерируются в случайном месте x, y на экране, и я определил их с помощью класса = ". Drawingpix". Новый элемент span, идентичный последнему, за исключением его местоположения, создается каждый второй или второй. Я хочу, чтобы анимировать элемент при нажатии. До сих пор я мог только анимировать все элементы при нажатии на тело.

Что я хочу: Я хотел бы анимировать элемент при касании или щелчке и только один элемент.

Это не получает ничего мне, когда в голове:

$('.drawingpix').click(function() { 
    // this is the dom element clicked????? 
    var element = this; 
    $(this).animate({ 
     height:'250px', 
     width:'250px', 
     'border-radius':'250px', 
     '-moz-border-radius': '250px', 
     '-webkit-border-radius': '250px', 
     opacity: -0.2, 
      }, 3000).fadeOut(0);  
}); 

Это оживляет каждый элемент с «drawingpix» класса, когда в теле, но ничего, когда в голове .:

$('body').click(function() { 
    // this is the dom element clicked????? 
    var element = this; 
    $('.drawingpix').animate({ 
     height:'250px', 
     width:'250px', 
     'border-radius':'250px', 
     '-moz-border-radius': '250px', 
     '-webkit-border-radius': '250px', 
     opacity: -0.2, 
      }, 3000).fadeOut(0);  
}); 

I Я новичок в jquery и javascript. Я потратил много времени на поиск и пробую разные вещи, прежде чем я разместил здесь.

Я думаю, что мне нужно, чтобы какой-то элемент индекса, который я нажал, и указать, какой элемент для анимации основан на индексе. Любая помощь будет оценена. Благодаря!

Answer 1

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

$('body').on('click', '.drawingpix' ,function() { 
    // this is the dom element clicked????? 
    var element = this; 
    $(this).animate({ 
     height:'250px', 
     width:'250px', 
     'border-radius':'250px', 
     '-moz-border-radius': '250px', 
     '-webkit-border-radius': '250px', 
     opacity: -0.2, 
      }, 3000).fadeOut(0);  
}); 

Answer 2

Я подозреваю, что Вы столкнулись с Гоча, что почти каждый новый пользовательский опытом JQuery. Для большинства обработчиков событий, таких как click(), вам нужно подождать, когда DOM будет готов. jQuery делает это довольно безболезненно, используя функцию jQuery.ready. Функция ожидает, что вы передадите ей функцию, содержащую код, который вы хотите вызвать, когда DOM будет готов. Так, к примеру, ваш код будет выглядеть следующим образом:

jQuery.ready(function(){ 
    $('.drawingpix').click(function(){ 
     // this is the dom element clicked????? 
     var element = this; 
     $(this).animate({ 
      height:'250px', 
      width:'250px', 
      'border-radius':'250px', 
      '-moz-border-radius': '250px', 
      '-webkit-border-radius': '250px', 
      opacity: -0.2, 
     }, 3000).fadeOut(0); 
    }); 
}); 

Answer 3

Там нет ничего плохого с содержимым вашего click обработчика; он должен применяться только к клику. Однако есть некоторые тонкости, которые вы должны наблюдать при динамическом создании элементов. Когда вы настраиваете обработчики, они применяются только к объектам , находящимся в настоящее время в DOM. Если после этого вы создадите новый элемент, у них не будет обработчика кликов, и это может быть проблемой, с которой вы столкнулись.

У jQuery есть решение для этого: live() function. Это не только добавляет обработчик для элементов, находящихся в настоящее время в DOM, он привязывает его ко всем соответствующим элементам в будущем. Так что это именно то, что вам нужно. Вам просто нужно изменить код так:

$('.drawingpix').live('click',function() { 
    $(this).animate({ 
     height:'250px', 
     width:'250px', 
     'border-radius':'250px', 
     '-moz-border-radius': '250px', 
     '-webkit-border-radius': '250px', 
     opacity: -0.2, 
     }, 3000).fadeOut(0);  
}); 

Вот рабочий jsFiddle: http://jsfiddle.net/QUFGQ/