javascript - for loop to make events

Question

I'm using a script where I need to make multiple events to make a popup appear.

I tried this, but it doesnt work:

for (i=0;i<=storingen;i++)
    {
        $("#storing" + i).click(function(){ centerPopup(); loadPopup(); });
    }

The output should be:

$("#storing0").click(function(){ centerPopup(); loadPopup(); });
$("#storing1").click(function(){ centerPopup(); loadPopup(); });
$("#storing2").click(function(){ centerPopup(); loadPopup(); });
$("#storing3").click(function(){ centerPopup(); loadPopup(); });

etc.

But the amount of divs with the id #storing(number here) is variable, so i wanted to make this, but it doesnt work...

I get the storingen variable from php:

<script type="text/javascript">aantalstoringen('.$aantalstoringen.')</script>

which i pick up in the js file like this:

function aantalstoringen(storingen){
    storingen=storingen;
}

I did an alert(storingen), which traced the right number, so that is ok.

COuld it be that the for loop doesnt work because that isnt in the aantalstoringen function, but in another function:

$(document).ready(function() {

I used this tutorial to make the javascript: http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/#popup1 and the script you get is this: http://yensdesign.com/tutorials/popupjquery/popup.js

I suggest you give all these elements the same class and just do $('.classname').click(function(){...});. — Felix Kling
– Felix Kling, Commented Oct 16, 2011 at 15:44
Also, I'd like to point out that this function is made [like you can see in the linked popup.js file] to show specific divs. Each div has a different ID because the content is different, so i cant use that function that searches for every element with ID storing* I'm sorry if I'm not very clear. — laarsk
– laarsk, Commented Oct 16, 2011 at 16:55

Brad Christie · Accepted Answer · 2011-10-16 16:06:47Z

1

Use the [name^="value"] selector instead:

$('[id^="storing"]').click(function(){ ... });

Basically, it's saying "find all elements whose ID begins with 'storing'."

If you need it more explicit, you can test the id inside a each() to apply better filtering. e.g.

$('[id^="storing"]')
  // make sure all IDs end in a number
  .each(function(i,e){
    if (/\d$/.test(e.id)) {
      // now that we only have ids that begin with storing and end in
      // a number, bind the click event
      $(e).click(function(e){ ... });
    }
  });

edited Oct 16, 2011 at 16:06

answered Oct 16, 2011 at 15:45

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

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

3 Comments

Felix Kling Over a year ago

I'm not sure what you want to achieve with the mapping... you will end up with an array of strings and you cannot bind event handlers to them.

Brad Christie Over a year ago

@FelixKling: True, still waking up. Should probably put the logic in the click statement or an each statement

Felix Kling Over a year ago

In that case I would use .filter instead ;) No worries, good morning :)

DanMan · Accepted Answer · 2011-10-16 15:59:53Z

0

You don't create dozens of event listeners that call the same handler. You create one listener on a higher level in the DOM and make it react only if the ID of the target matches the pattern.

This is why libs like jQuery are teaching kids bad manners... -.-

answered Oct 16, 2011 at 15:59

DanMan

11.6k4 gold badges43 silver badges61 bronze badges

1 Comment

laarsk Over a year ago

Yeah, you know, I realised that the script I used is totally not handy to use here, as they all call the same handler... I have to make different eventlisteners which call different handlers to make this work... how stupid of me..

Brian Nickel · Accepted Answer · 2011-10-16 15:49:18Z

0

It could be any number of things. It would help if you showed us more of the code, like all of the aantalstoringen function.

The following should work:

function aantalstoringen(storingen) {
    $(document).ready(function() {
        for (i=0;i<=storingen;i++) {
            $("#storing" + i).click(function(){ centerPopup(); loadPopup(); });
        }
    });
}

That said, this is a really bad way to do this. I would have each of your elements also include class="storing". Then you don't have to get the number of objects from the server:

$(document).ready(function() {
    $(".storing").click(function(){ centerPopup(); loadPopup(); });
});

answered Oct 16, 2011 at 15:49

Brian Nickel

27.6k5 gold badges83 silver badges112 bronze badges

1 Comment

laarsk Over a year ago

I showed you all of the aantalstoringen function, its just that line to import the variable which is traced by PHP.

Febin J S · Accepted Answer · 2011-10-16 15:53:57Z

0

First you give a class name to the div like class="popupDiv". Then you try something like this

$('.popupDiv').live('click', function(){
      // var id = $(this).attr('id'); By doing so you will get the current id of the div too.
      centerPopup();
      loadPopup(); 
});

answered Oct 16, 2011 at 15:53

Febin J S

1,3683 gold badges26 silver badges55 bronze badges

Comments

user447356 · Accepted Answer · 2011-10-16 15:54:48Z

0

As Brad correctly said, you don't have to know the amount of such elements, you can just iterate over all element having id starting with something.

So your code would be:

$(document).ready(function() {
    $('[id^="storing"]').click(function() {
        centerPopup();
        loadPopup();
    });
});

answered Oct 16, 2011 at 15:54

user447356

Collectives™ on Stack Overflow

javascript - for loop to make events

5 Answers 5

3 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related