.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?

score 4 · Accepted Answer · edited May 23 '17 at 11:49

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 '17 at 11:49

Community

1
1

answered Sep 25 '14 at 08:33

Arun P Johny

384,651
66
527
531

I edited my code, it some how is not working. Could you take a look at it? – Frederik Witte Sep 25 '14 at 08:34
[.toggle(function, function, ... )] is [removed in jQuery 1.9](http://jquery.com/upgrade-guide/1.9/#toggle-function-function-removed) – Arun P Johny Sep 25 '14 at 08:37
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? – Frederik Witte Sep 25 '14 at 08:44
@FrederikWitte if you can post the updated code, we can have a look – Arun P Johny Sep 25 '14 at 08:45
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. – Frederik Witte Sep 25 '14 at 08:53
@FrederikWitte jumping left & right? can you share the updated code – Arun P Johny Sep 25 '14 at 08:55
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/61880/discussion-between-arun-p-johny-and-frederik-witte). – Arun P Johny Sep 25 '14 at 08:57

Satpal · Answer 2 · 2014-09-25T08:41:12.147

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 '14 at 08:41

answered Sep 25 '14 at 08:32

Satpal

132,252
13
159
168

I edited my code, it some how is not working. Could you take a look at it? – Frederik Witte Sep 25 '14 at 08:36

fast · Answer 3 · 2014-09-25T08:43:43.460

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.

score 0 · Answer 4 · answered Sep 25 '14 at 08:41

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

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

4 Answers4