我编写了一个程序,其中包含用户与之交互的表单。因为有很多事件绑定(bind)到不同的按钮,所以我编写了一个循环来解析一些包含表单输入信息的 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)到函数解析的最后一个事件。当我使用 .bind()
时,一切都会按计划进行 - 即单击“place_x”将值设置为 10,单击“place_y”将值设置为 50。
当使用 .on()
时,无论我更改什么,都会将值设置为 50,我假设这是因为最后一个函数绑定(bind)到每个事件。
有人能看出我做错了什么吗?
更新:有很多不同的方法可以做到这一点,我随后更改了代码的工作方式,但是这个问题与 .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);
关于javascript - 用 jQuery.on 替换 jQuery.bind,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12283160/