0

ユーザーが操作するフォームを含むプログラムを作成しました。さまざまなボタンにバインドされたイベントが多数あるため、フォーム入力情報を含む JS を解析するループを作成しました。以下にデータの例を示します。

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
                    }
                }
            }
        }
    }
}

次に、データは次のように解析されます。

    $.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);
});

ご覧のとおり、私は現在使用.bind()していますが、使用したいです.on()。残念ながら、これを行うと、フォーム内のすべてのアイテムが関数によって解析された最後のイベントにバインドされます。すべてを使用すると、.bind()すべてが計画どおりに機能します。つまり、「place_x」をクリックすると値が 10 に設定され、「place_y」をクリックすると値が 50 に設定されます。

を使用する場合.on()、どちらを変更しても値は 50 に設定されます。これは、最後の関数が各イベントにバインドされるためだと想定しています。

私が間違ったことを誰かが見ることができますか？

更新:これを行うにはさまざまな方法があり、その後コードの動作方法を変更しましたが、この質問は、なぜ.bind()機能し、なぜ機能し.on()ないのかに関連しています。

4

2 に答える 2

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

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

使用しようとしているように見える方法.on()は、ライブ - バブリング - イベントのようなものです。作成された最後のイベントだけが固執しているように見えます。なぜ各値が 50 に設定されるのですか?

//$form_markup.on(event_index, $elem, event);
于 2012-09-05T14:02:26.827 に答える
1

1 回の簡単な呼び出しで、ハンドラー関数を含むプロパティ マップを持つ要素を作成できます。

var $elem = $('<input/>', properties);

「プロパティ」オブジェクトには、イベント ハンドラーを含めることができます。

var $elem = $('<input/>', {
  type: 'text',
  name: 'somethingUseful',
  click: function(ev) { /* click handler */ },
  change: function(ev) { /* change handler */ },
  css: { color: "red" }
});
于 2012-09-05T14:02:18.700 に答える