LouieV
LouieV

Reputation: 1052

form control triggers animation using JQuery

I have a ul that where I have 3 li that serves as containers and are animated. The two edge li will have some from controls (selectsand buttons). My issue is that using the control fires the animation which I don't want. Here is an exambple fiddle. How can I prevent the select from firing the animation? Thanks

Upvotes: 0

Views: 54

Answers (1)

Ruben Infante
Ruben Infante

Reputation: 3135

Block the behavior if the event target is the select in question.

$('li#side-controls-container').on('click', function(){
    if ($(event.target).is('select')) { return; }
    ...
});

DEMO

Suggestion:

If you plan to have multiple controls, you may consider giving them all a specific class. Then you can check if the event target has that class instead of checking if it is a specific type of element.

$('li#side-controls-container').on('click', function(){
    if ($(event.target).is('.container-control')) { return; }
    ...
});

Upvotes: 1

Related Questions