.on('click') in for loop to multiple elements?

Question

I'm having trouble with my function. I need a for loop to attach a click event to my elements. Now it sadly only adds the click event to the last element.

I did it like this right now:

var $texte = $('.text-bg');

            $texte = $texte.children();
            for(i=0;i<$texte.length;i++){
            switch($($texte[i]).attr('class')){

                case 'text-top-left':
                console.log($texte[i]);
                    $($texte[i]).on('click', function(){
                        $($texte[i]).toggle(
                            function(){$($texte[i]).animate({'left':'0'})}, 
                            function(){$($texte[i]).animate({'left':'-100px'})}
                            );
                            });
                break;
            }
            }

But somehow the click event doesnt save. So when it goes into the second loop in the for function, the first click event is being overwritten. How to prevent this?

Community · Accepted Answer · 2017-05-23 11:49:36Z

4

You can use this inside the event handler to refer to the current element

$($clicker[i]).on('click', function () {
    $(this).animate({
        'left': '0'
    });
});

Why is your solution not working

The given code can be changed as(there is no need to has a switch statement here)

var $texte = $('.text-bg');

$texte.children('.text-top-left').click(function () {
    var $this = $(this),
        flag = $this.data('animToggle');
    $this.data('animToggle', !flag);
    $this.animate({
        'left': flag ? '0' : '-100px'
    })
})

Demo: Fiddle

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Sep 25, 2014 at 8:33

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Frederik Witte Over a year ago

I edited my code, it some how is not working. Could you take a look at it?

Arun P Johny Over a year ago

[.toggle(function, function, ... )] is removed in jQuery 1.9

Frederik Witte Over a year ago

The edit you posted works, the problem is I have atleast 2 cases. That's why I needed the switch. One time I have to animate from the right, and the other time from the left side. Is there a way to change your code to this? And could you post a resource so I could understand what you did?

Arun P Johny Over a year ago

@FrederikWitte if you can post the updated code, we can have a look

Frederik Witte Over a year ago

Hey, I just used ur code($this insead of $($texte[i])). I think its okay like it is right now. The only problem is its flickering now. When I first click it it works just fine, but when I click it again, its jumping left and right.

|

Satpal · Accepted Answer · 2014-09-25 08:41:12Z

3

You need to use this, In event handler it refers to element which executed the event.

Use

$($clicker[i]).on('click', function(){
    $(this).animate({'left':'0'}); //Used this here
});

Your code can be simplified as However .toggle(function, function, ... ) removed in jQuery 1.9

$('.text-bg > .text-top-left').on('click', function() {
    var toggle = $(this).data('toggle');
    $(this).data('toggle', !toggle);
    $(this).animate({
        'left': toggle ? '-100px' : '0'
    });
});

edited Sep 25, 2014 at 8:41

answered Sep 25, 2014 at 8:32

Satpal

134k13 gold badges168 silver badges171 bronze badges

1 Comment

Frederik Witte Over a year ago

I edited my code, it some how is not working. Could you take a look at it?

fast · Accepted Answer · 2014-09-25 08:43:43Z

1

You should be able to attach the handler to all jQuery result elements at once:

$clicker.on('click', function(){
    $(this).animate({'left':'0'}); //Used this here
});

With your updated code, you should use the selection facilities already provided by jQuery:

$('.text-bg > .text-top-left').on('click', function() {
  $(this).toggle(
    function() {
     $(this).animate( {'left':'0'})}, 
      function() {
       $(this).animate({'left':'-100px'})
      });
    });
 });

To add a second case (for another class) just 'double' the code with the alternative behavior.

edited Sep 25, 2014 at 8:43

answered Sep 25, 2014 at 8:35

fast

8857 silver badges15 bronze badges

Comments

Adassko · Accepted Answer · 2014-09-25 08:41:23Z

0

You can use

$($texte[i]).on('click', function(){
    $(this).animate({'left':'0'});
});

OR simply assign the loop variable to a local variable INSIDE the loop:

var j = i;
$($texte[j]).on('click', function(){
    $($texte[j]).animate({'left':'0'});
});

answered Sep 25, 2014 at 8:41

Adassko

5,36326 silver badges40 bronze badges

Collectives™ on Stack Overflow

.on('click') in for loop to multiple elements?

4 Answers 4

7 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related