Question

I’ve written a program that includes a form that the user interacts with. Because there are lots of events bound to different buttons I have written a loop that parses some JS that contains the form input information. Here is some example data:

var value = 0,
forms = {
    place_controls : {
        attrs : {
            'class' : 'place-form'
        },
        input : {
            place_x : {
                attrs : {
                    type : 'text',
                },
                events : {
                    change : function () {
                        value = 10;
                    }
                }
            },
            place_y : {
                attrs : {
                    type : 'text',
                },
                events : {
                    change : function () {
                        value = 50
                    }
                }
            }
        }
    }
}

The data is then parsed by this:

    $.each(forms, function (form_index, form) {

    var $form_markup = $('<form>').attr(form.attrs);
    // Next: loop through each input element of the form we've reached
    $.each(form.input, function (element_index, element) {

        var $elem = $('<input>').attr(element.attrs);
        $elem.appendTo($form_markup);

        if (element.events !== undefined) {

            $.each(element.events, function (event_index, event) {

                $elem.bind(event_index, event);
                //$form_markup.on(event_index, $elem, event);
            });
        }
    });

    $form_markup.appendTo($form_goes_here);
});

As you can see, I’m using .bind() at the moment, however I want to use .on(). Unfortunately, when I do this all of the items within a form are bound to the last event parsed by the function. When I use .bind() everything works as planned – i.e. Clicking on ‘place_x’ sets value to 10, clicking ‘place_y’ sets value to 50.

When using .on(), whichever I change sets value to 50, which I am assuming is because the last function is becoming bound to each event.

Can anybody see what I have done wrong?

Update: There are many different ways to do this, and I have subsequently changed how my code works, however this question is related to why .bind() is working and why .on() is not.

Answer 1

//$elem.bind(event_index, event);

//It looks like you should just be using .on() like this
$elem.on(event_index, event);

The way it looks like you are trying to use .on() is in the live -bubbling- event sort of way, it looks like only the last event you are created is sticking, why each value just gets set to 50.

//$form_markup.on(event_index, $elem, event);