Defining click events using jquery with for loop

Question

0.00/5 (No votes)

See more:

Here's the code:

C#

Popups = [{c:'#Payment-Selection',w:'#Cards-Popup'},{c:'#Drop-SY',w:'#Start-Years'}];
var ActivatePopups = function() {
    for (var i=0; i<Popups.length; i++) {
        $(Popups[i]['c']).click(function() { PopupDrop(Popups[i]['w']); });
    }
}
ActivatePopups();

Actual Popups array is much longer, thats why I want to use such method. Anyway, this does not work because there is problem when I define function bolded function.

The click is triggered, but it seems, that the firing function is not complete, because I'm getting such error¬:
'Uncaught TypeError: Cannot read property 'w' of undefined'

Posted 17-Feb-14 10:43am

Tautvydas Deržinskas

Updated 17-Feb-14 10:50am

v4

Add a Solution

2 solutions

Solution 2

It hard to say what's wrong without having your code for PopupDrop; but let's write it in finer detail. Maybe you meant to do something different. Let's see:

JavaScript

var ActivatePopups = function() {
    for (var i=0; i<popups.length;>
        cElement = $(Popups[i].c); // jQuery wrapper for the element found by the id selector
        // also, pay attention for better syntax for using indices 'c' and 'w'
        wElement = $(Popups[i].w); // jQuery wrapper for the element found by the id selector
        // and you simply used Popups[i]['w']; that would be some string, not element
        // did you actually mean to get the element by id selector? it would be more logical
        // adding the handlers:
        cElement.click(function() {
            PopupDrop(wElement); // maybe this is what is required by PopupDrop?
        });
    }

Please try. It this won't help you, you need to provide more detail on your code.

Generally, it's a good idea to use separate variables and assign the DOM element wrappers to them; that way, you can always reuse the element wrapper without using selectors again and again (no, you did not to this mistake in your code, this is just the potential problem).

—SA

Posted 17-Feb-14 11:09am

Sergey Alexandrovich Kryukov

Updated 17-Feb-14 11:10am

v3

Comments

Tautvydas Deržinskas 17-Feb-14 17:54pm

So lets say full code is:
<pre lang="Javascript">function PopupDrop(n) { console.log(n); }

var Popups = [
{c:'#Payment-Selection',w:'Cards-Popup'},
{c:'#Drop-SY',w:'Start-Years'}
];

function ActivatePopups() {

for (var i=0; i<Popups.length; i++) {

$(Popups[i]['c']).click(function() { PopupDrop(Popups[i]['w']); });

}

}
ActivatePopups();</pre>
It does not work for me, using newest version of jquery. Thats not the case with elements, I just need to pass second object option to function as string...

Tautvydas Deržinskas 17-Feb-14 18:08pm

P.s. In this case if I will click on <div id="Payment-Selection"></div> I will get error: 'Uncaught TypeError: Cannot read property 'w' of undefined ', line: $(Popups[i]['c']).click(function() { PopupDrop(Popups[i]['w']); }); http://jsfiddle.net/s5auB/

Sergey Alexandrovich Kryukov 17-Feb-14 18:34pm

Why would you need to log selector string?
—SA

Sergey Alexandrovich Kryukov 17-Feb-14 18:35pm

Also, can you run this under the debugger? Use my longer variant of code. Locate exception throwing precisely. The problem looks quite simple...
—SA

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tautvydas Deržinskas · Accepted Answer · 2014-02-18T08:54:00

I fixed it using call back function: