jQuery: dynamically binding events to dom objects

Question

Several related questions already exist on this site and elsewhere, but none of the answers seems to apply to my situation. I have a bunch of radio buttons in HTML.

<input type="radio" name="b1" value="aa"> aa<br>
<input type="radio" name="b1" value="ab"> ab<br>
<input type="radio" name="b1" value="ac"> ac<br>

<input type="radio" name="b2" value="ba"> ba<br>
<input type="radio" name="b2" value="bb"> bb<br>
<input type="radio" name="b2" value="bc"> bc<br>

<script type="text/javascript">
var PK = {    
   modes: ["b1", "b2"],

   init: function() {        
      // attach actions to radio buttons
      for (var key in this.modes) {
          var mode = this.modes[key];
          $("input[name='" + mode + "']").bind(
               "change", 
               function() { 
                 PK[mode]($("input[name='" + mode + "']:checked").val()); 
               } 
          );
       }
    },

    b1: function(val) { .. do something .. },

    b2: function(val) { .. do something else .. },
};

$(document).ready(function() {
   PK.init();
});
</script>

The above doesn't work at all. I have tried .live instead of .bind, and even that doesn't work as expected. In fact, both of them bind the action to whatever is the last entry in modes, in the above, "b2". That is, the function PK.b2() is fired whether I change the value in b1 or b2 buttons. If I reverse the modes entries, the last one takes on the value. How can I accomplish he above successfully?

Lukáš Lalinský · Accepted Answer · 2009-10-03 19:05:02Z

3

JavaScript closures use the parent function scope, so PK[mode] will always refer to the last mode. You can do something like this to avoid it:

$("input[name=" + mode + "]").bind(
    "change", 
    function(mode) { 
        return function() {
             PK[mode]($("input[name='" + mode + "']:checked").val());
        };
    }(mode)
);

See for example the The infamous loop problem section of this article for more details.

answered Oct 3, 2009 at 19:05

Lukáš Lalinský

41.5k6 gold badges109 silver badges128 bronze badges

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

Comments

lrudor · Accepted Answer · 2009-10-03 19:19:14Z

2

In the for loop in your code the variable mode is set each time for the the different modes. However it will only keep the last value of the loop. so instead you need to make some changes to the function inside the bind.

$("input[name=" + mode + "]").bind(
    "change", 
    function(e) {
        PK[$(this).attr('name')]($(this).val()); 
    } 
);

Now we are using jquery to figure out the name of the item we are working with, rather than relying on a variable that only has the last bit of data from a loop.

edited Oct 3, 2009 at 19:19

answered Oct 3, 2009 at 18:58

lrudor

831 silver badge6 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:19:07Z

0

There are two problems from what I see.

First, as lrudor pointed out, mode in the closure is the last mode iterated.

Second, use [name=whatever] instead of [name="whatever"].

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Oct 3, 2009 at 19:13

strager

90.3k27 gold badges139 silver badges181 bronze badges

Comments

Kristoffer Deinoff · Accepted Answer · 2009-10-03 19:52:34Z

0

Am I understanding you correct if this is what you want to do?

init: function() {
    // attach actions to radio buttons
    for (var key in this.modes) {
        var mode = this.modes[key];
        $("input[name='" + mode + "']")
            .bind("change", function(e) {
                var radio = e.srcElement;
                PK[radio.name](radio.value);
            })
            .bind("click", function() {
                // Loose focus of the radio button once clicked,
                // so the change-event fires
                this.blur();
            });
    }
},

answered Oct 3, 2009 at 19:52

Kristoffer Deinoff

1175 bronze badges

Collectives™ on Stack Overflow

jQuery: dynamically binding events to dom objects

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related