Question

我在创建Nested Model Form时遵循了Railscast，并且在演示时通过Javascript成功添加和删除了字段集。

在我的项目中，我需要一些关于更改功能的应用到新创建的字段;我有一个价格字段，并且在更改此需求时，例如为用户显示净回报值。

如果我创建字段，保存然后编辑，我的on change函数可以正常工作，但它们不能在保存父对象之前添加的任何新字段/字段集上工作。

简而言之，我如何使我的JS函数适用于通过JS创建的字段？

我正在尝试应用于这些新创建的字段的JS函数如下所示，这包含在准备好的文档中：

$('.ticket-price').each(function() { 
  $(this).change(function() {

    var ticket_price = $(this).val();

    if (ticket_price == 0) 
      {
      fee_rate = 0
      } 
    else if (ticket_price >= 0.01)
      {
      fee_rate = 0.10
      }

    var booking_fee = ticket_price * fee_rate
    var customer_pays = parseFloat(ticket_price) + parseFloat(booking_fee)
    var vendor_fee = ((customer_pays / 100) * 3.5) +0.2
    var vendor_receives = (parseFloat(ticket_price) - vendor_fee )

    $(this).parent().next().children('input.booking-fee').val(booking_fee.toFixed(2)).effect( "highlight", 
              {color:"#FFFF33"}, 1500 );

    $(this).parent().next().next().children('input.vendor-receives').val(vendor_receives.toFixed(2)).effect( "highlight", {color:"#FFFF33"}, 1500 );

  });

});

我是否正确思考，因为这是在准备文件中，因此新的字段不会被这看到？我该如何让他们“被人看到”？

编辑：新版本的代码，我的行为很奇怪。只看到第二次更改事件，然后根据更改的次数发生突出显示.....所以如果对票价字段进行了三次更改，它会“发出”黄色三次。

$(document).on('change', '.ticket-price', function() {
  $(this).change(function() {

    var ticket_price = $(this).val();

    if (ticket_price == 0) 
      {
      fee_rate = 0
      } 
    else if (ticket_price >= 0.01 && ticket_price <= 25.00)
      {
      fee_rate = 0.10
      }
    else if (ticket_price >= 25.01 && ticket_price <= 40.00)
      {
      fee_rate = 0.08
      }
    else if (ticket_price >= 40.01 && ticket_price <= 60.00)
      {
      fee_rate = 0.07
      }
    else if (ticket_price >= 60.01)
      {
      fee_rate = 0.06
      }

    var booking_fee = ticket_price * fee_rate
    var customer_pays = parseFloat(ticket_price) + parseFloat(booking_fee)
    console.log(customer_pays);
    var vendor_fee = ((customer_pays / 100) * 3.5) +0.2
    var vendor_receives = (parseFloat(ticket_price) - vendor_fee )

    console.log(booking_fee);
    console.log(vendor_receives);

    $(this).parent().next().children('input.booking-fee').val(booking_fee.toFixed(2)).effect( "highlight", 
              {color:"#FFFF33"}, 1500 );

    $(this).parent().next().next().children('input.vendor-receives').val(vendor_receives.toFixed(2)).effect( "highlight", {color:"#FFFF33"}, 1500 );

  });

});

Answer 1

这样做：

$(document).on('change', '.ticket-price', function() { 
    var ticket_price = $(this).val();
    ...
});

这种方式不是将您的事件绑定到当前页面上的HTMLElements，而是告诉jQuery使用'ticket-price'类观察整个文档中任何元素的更改。甚至是动态添加的。

以下是jsFiddle示例：http://jsfiddle.net/64eLt/2/

Answer 2

好的，我认为您遇到的问题是您的Javascript没有获取动态添加的项目

动态DOM

Javascript（和JQuery凭借继承）通过将DOM（文档对象模型）中的元素绑定到事件来工作。这些事件由您的函数描述，Javascript基本上将“监听器”添加到您包含的各种元素

您遇到的问题是当您更新DOM时，您的新元素不会绑定到文档加载时分配的任何函数，从而阻止它们工作

正如另一个答案所指出的那样，对此的解决方案是delegate从文档到您希望更改的元素的函数，如下所示：

 $(document).on("change", ".ticket_price",function() {
     //do stuff here
 });

添加表单字段然后将JS函数应用于它们？

2 个答案: