binding event with jquery in a loop?

Question

Description:

I have many dropdowns on my page that all call a "update price" function. This is so that when user selects an option, the price changes accordingly. There are many of these dropdowns and they all have similar names sizes-1, sizes-2, etc

Problem

I am finding myself copy/pasting extremely similar event binding code because I can't figure out how to bind it through some sort of loop.

Example:

Static

$( '.sizes-1' ).on('change', function() {
        sizes[0] = $(this).val();
        p.update_pricing( slider_values, price_fields, sizes, ); 
});

Attempt at a loop ( not working )

for( index = 0; index < number of divs; index++ ) {        
    $( '.sizes-' + index ).on('change', function() {
        sizes[ index ] = $(this).val();
        p.update_pricing( slider_values, price_fields, sizes, );                
    });
}

There are going to be many .sizes divs on this page and I don't want to copy/paste that static code 30+ times. I was wondering if anyone ran into a similar problem and knows a solution?

Thank you very much.

Edit: ( copy/pasted code )

for( index = 0; index < num_divs; index++ ) { 
    ( function( context_index ) {     
          $( '.sizes-' + context_index ).on( 'change', function() {
            sizes[ context_index ] = $(this).val();
            p.update_pricing( slider_values, price_fields, sizes );                
         });
    } ( index ) ); 
}

ID being like size-1, size-2 is understandable. But why would you have 30+ dropdowns with different class as such? A single class as sizes would really have solved your problem. — Selvakumar Arumugam
– Selvakumar Arumugam, Commented Jan 14, 2013 at 21:49
Also in the 2nd version, the index inside the .change will not be the correct value as the value of i will be equal to number of divs at the time of executing the handler function. — Selvakumar Arumugam
– Selvakumar Arumugam, Commented Jan 14, 2013 at 21:52
how would that solve my problem, O_o, as I need the values from each select? — Phil
– Phil, Commented Jan 14, 2013 at 22:11

Sushanth -- · Accepted Answer · 2013-01-14 22:02:33Z

3

Why don't you tie up your function within a closure so that the context is saved for that particular index..

for( index = 0; index < number of divs; index++ ) { 
     (function(contextIndex) {     
         $( '.sizes-' + contextIndex ).on('change', function() {
             sizes[ contextIndex] = $(this).val();
             p.update_pricing( slider_values, price_fields, sizes, );                
         });
    }(index)); 
 }

answered Jan 14, 2013 at 22:02

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

1 Comment

Phil Over a year ago

This is not working for whatever reason. The binding are not being applied.

MatRt · Accepted Answer · 2013-01-14 23:18:58Z

1

You can add a CSS class to all of your select HTML elements and then, use jQuery CSS selector to retrieve all of them

<select class="selectSpecial" id="sizes-1">...</select>
<select class="selectSpecial" id="sizes-2">...</select>
etc

And you retrieve all your select with

$(".selectSpecial").on('change', function(changeEvent) {

    var index = parseInt($(this).attr('id').replace('size-', '')) - 1;
    sizes[index] = $(this).val();
    p.update_pricing( slider_values, price_fields, sizes);

});

edited Jan 14, 2013 at 23:18

answered Jan 14, 2013 at 21:51

MatRt

3,5441 gold badge22 silver badges15 bronze badges

4 Comments

Phil Over a year ago

how would I uniquely get the value of the select and place them in an array? this wouldn't work.

MatRt Over a year ago

You could place "size-1", "size-2" etc as id of your select element instead of class, and then retrieve the index of your array with this id : $(this).attr('id').replace('size-',''). The closure solution is good but you are creating a lot of anonymous function.

Phil Over a year ago

Can you elaborate on how I could retrieve the values? I am confused as to where I would put $(this).attr('id').replace('size-', '')

Phil Over a year ago

Just an FYI. I figured out what you were saying :)

Kevin Boucher · Accepted Answer · 2013-01-14 21:50:29Z

0

You just need to use a common class name (or target select directly if this works in your situation:

$( '.sizes' ).on('change', function() {  // <---- Note 'sizes'
    sizes[0] = $(this).val();
    p.update_pricing( slider_values, price_fields, sizes, ); 
});

HTML

<select class="sizes sizes-1">
    <-- options here -->
</select>

This will apply your function to all select boxes with the sizes class.

answered Jan 14, 2013 at 21:50

Kevin Boucher

16.8k3 gold badges51 silver badges57 bronze badges

Collectives™ on Stack Overflow

binding event with jquery in a loop?

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related