CSS transitions don't work on newly appended elements.

[nixnerd]

I’m using jQuery to .append() the DOM with new elements. Now, I’m attempting to use .addClass() to apply transitions via CSS. However, transitions don’t work on newly appended elements… I knew this.

Now, I’m wondering: What’s my best course of action? Should I just animate the elements with jQuery instead of using .addClass()?

[nixnerd]

Sorry. I’ve realized that’s not actually my problem. It’s not that the transition isn’t working. I’m having trouble calling a function.

[nixnerd]

Sorry @Soronbe… I figured it out. Didn’t make that very clear.

My function was structured like this:

$('.phone').on('input', function phoneCheck(){
    // Stuff here...
)}

$(document).on('input', '.phone', function phoneCheck(){
    // Stuff here...
)}

[__]

Don’t know if you figured this out yet…

If you want to name the function, define it elsewhere and reference the name:

function phoneCheck(){ 
    /*  stuff here  */ 
}
$(document).on( 'input', '.phone', phoneCheck );

otherwise, make it an anonymous function:

$(document).on( 'input', '.phone', function(){
    /* do phoneCheck stuff  */
} );

[nixnerd]

I’ll make them anonymous when I’m finished. But, I’m not sure if I’ll have to ref in another part or not. That’s why I named them.

[nixnerd]

Don’t know if you figured this out yet…

And yes, I got it figured out… well, this part at least :)

[__]

I’ll make them anonymous when I’m finished. But, I’m not sure if I’ll have to ref in another part or not. That’s why I named them.

Either way works. As a side note, I have stopped using named functions entirely in favor of assigning anon functions to variables/ properties.

var phoneCheck = function(){
    /*  do phoneCheck stuff  */
};

This allows you to reference them, plus is better for modular code (managing dependencies, scope, etc.).

[nixnerd]

Either way works. As a side note, I have stopped using named functions entirely in favor of assigning anon functions to variables/ properties.

You know.. I played around with that method for a bit and couldn’t tell if I liked it… but now that I’m looking at it, I think it will help me solve a problem I have.

*Brain: Store that.

[nixnerd]

I’m in favor of not assigning it to a var OR naming it if I don’t have to! :)

[__]

If you’re only using it once, yeah, no way.

What I realized recently, though, is that how/where I create an anon function (i.e., a closure) has less to do with how/where or how many times I want to use it, and more to do with how I want it to be scoped (i.e., which vars I want it to close around).

[Author]

Posts