Question

I have some jQuery that is dynamically creating a span element with a certain shape defined by css. The span elements are generated at a random x,y location on the screen and I have defined them with class=”.drawingpix”. A new span element identical to the last, except it’s location is created every second or two. I want to be able to animate the element when clicked. So far I have only be able to animate all of the elements when the body is clicked.

What I want to happen: I would like to animate the element when touched or clicked and only that one element.

This gets me nothing when in the head:

    $('.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);    
});

This animates every element with the class ‘drawingpix’ when in the body but nothing when in the head.:

    $('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 am new to jquery and javascript. I have done hours of searching and trying different things before I have posted here.

I think I need to some how get the index of the element I clicked and specify which element to animate based off of the index. Any help will be appreciated. Thanks!

Answer 1

Why don’t you try delegating the event and see if that approach works for newly created elements..

 $('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);    
});