Replacing jQuery.bind with jQuery.on

Replacing jQuery.bind with jQuery.on

本文关键字：jQuery on with bind Replacing      更新时间：2023-09-26

我编写了一个程序，其中包含一个用户可以交互的表单。因为有很多事件绑定到不同的按钮，所以我编写了一个循环，解析一些包含表单输入信息的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()为什么不工作有关。

//$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);

您可以在一个简单的调用中创建具有属性映射的元素，其中包括处理程序函数：

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

"属性"对象可以包含事件处理程序：

var $elem = $('<input/>', {
  type: 'text',
  name: 'somethingUseful',
  click: function(ev) { /* click handler */ },
  change: function(ev) { /* change handler */ },
  css: { color: "red" }
});
相关文章：