用jQuery替换jQuery.bind

我写过一个包含用户交互的表单的程序。因为有很多事件绑定到不同的按钮，我写了一个循环来分析一些包含表单输入信息的JS。下面是一些示例数据：用jQuery替换jQuery.bind

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()不是。

来源

2012-09-05 Alex

为什么ypu想改变它？ –

您应该阅读['.prop（）']（http://api.jquery.com/prop/），因为这可能是您想要使用的而不是'.attr（）'。 – Pointy

只是因为on（）应该是更高效的，但不管我为什么它不起作用而困惑，现在我真的想修复它！ – Alex

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

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

的方式，看起来你正在尝试使用.on()是处于live-bubbling事件的方式，看起来只有你创建的最后一个事件在坚持，为什么每个值都被设置为50。

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

来源

2012-09-05 14:02:26

当然'冒泡'方法适合在这里使用吗？我所做的所有事情都是事先设定好委托界限。 – Alex

那么，如果你正在创建这些元素并将它们放入DOM中，你将不需要它们委托 –

我明白了，谢谢。 – Alex

您可以创建属性映射包含在一个简单的呼叫处理功能的元件：

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-05 14:02:18 Pointy

这很好用 - 谢谢！尽管如此，它并没有回答这个问题，所以现在我会放开它以寻求进一步的回应。 – Alex

是的你是对的;用'.on（）'*直接替换'.bind（）'应该*工作... – Pointy

用jQuery替换jQuery.bind

回答

相关问题