jQuery defining click events in for loop (taking click event info from array of objects)

Question

Let's start with the code:

function PopupDrop(n) { // function to trigger on click
    for (var i=0; i<Popups.length; i++) {
        if (($(Popups[i]['w']).css('display') != 'none') && (n != Popups[i]['w'])) {
            $(Popups[i]['w']).stop(true,true).slideUp(150);
        }

    // Poping actual popup
    if ($(n).css('display') == 'none') $(n).slideDown(150);
    else $(n).slideUp(150);
}
var Popups = [ // Array of ID which we click, and ID's which we send to click trigger function
    {c:'#Payment-Selection',w:'#Cards-Popup'},
    {c:'#Drop-SY',w:'#Start-Years'},
    {c:'#Drop-SM',w:'#Start-Months'}];
function ActivatePopups() { // Defining click events function
    for (var i=0; i<Popups.length; i++) { 
        var Wt = Popups[i]['w'];
        $(Popups[i]['c']).click(function() {
            PopupDrop(Wt); console.log(Wt);
        });
    console.log('On click here: '+Popups[i]['c']+' do this:'+Popups[i]['w']); }
}
ActivatePopups();

Basicaly I'm doing custom select boxes, which must slideUp when others are slideddown. The problem here is that fuinction ActivatePopups console logs everything how it should be, but when I do click on different defined elements (eg. #Payment-Selection, #Drop-Sy...) the click does not trigger dropdown, and console.log shows same id on all clicks... If I define clicks without for loop, eg. $('#Payment-Selection').click(function() { PopupDrop('#Cards-Popup'); }); it works as charm... But as I have a lot of differend ID's I would like to shorten the code, with for loop.

Any ideas why is it happening?

http://jsfiddle.net/aw7bt/1/

Properly presenting your code would make it easier for other coders to review it. Putting so much on one line makes the code hard to follow. — Denys Séguret
– Denys Séguret, Commented Feb 18, 2014 at 9:13
Could you make a fiddle?(looks like a closures issue to me, btw) — tewathia
– tewathia, Commented Feb 18, 2014 at 9:18

Community · Accepted Answer · 2017-05-23 12:29:22Z

1

I fixed it using call back function:

function PopupCallBack(x) {
   return function (e) {
      PopupDrop(x);
   };
}
function ActivatePopups() {
    for (var i=0; i<Popups.length; i++) { var Wt = Popups[i]['w']; $(Popups[i]['c']).click(PopupCallBack(Wt));
    console.log('On click here: '+Popups[i]['c']+' do this:'+Popups[i]['w']); }
}

More information about problem: Closures: Line by Line explanation of "Javascript: Good Parts" example?

Thanks for the answer to Tomasz Kowalczyk

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Feb 18, 2014 at 9:36

Tautvydas

1,2887 gold badges19 silver badges33 bronze badges

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

Comments

tewathia · Accepted Answer · 2014-02-18 09:31:13Z

0

This problem can be fixed in a number of ways. You can use closures, or make the Popups variable an object(with key-value pairs, like var Popups = {'Payment-Selection':'Cards-Popup',...), but the solution that would require the least modification to your code would be to use a custom attribute, like so:

$(Popups[i]['c']).attr('Wt', Popups[i]['w']).click(function () {
        var Wt = this.getAttribute('Wt');
        PopupDrop(Wt);
        console.log(Wt);
});

DEMO

answered Feb 18, 2014 at 9:31

tewathia

7,3383 gold badges26 silver badges28 bronze badges

Comments

kamilkp · Accepted Answer · 2014-02-18 09:32:17Z

0

Maybe that will work for you: http://jsfiddle.net/5vWA4/

I implemented it differently but imho its simpler.

function ActivatePopups() {
    $('.popup-activator').click(function(){
        console.log($(this).data('w'));
    });
}

answered Feb 18, 2014 at 9:32

kamilkp

9,8106 gold badges41 silver badges58 bronze badges

Collectives™ on Stack Overflow

jQuery defining click events in for loop (taking click event info from array of objects)

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related