Javascript 添加表单字段，然后对其应用JS函数？

我已经遵循RailsaST创建了一个，并且正在通过Javascript成功地添加和删除字段集，正如它所演示的那样

在我的项目中，我需要更改一些函数以应用于新创建的字段；例如，我有一个价格字段，在更改此字段时需要向用户显示净回报值

如果我创建字段、保存然后编辑，“更改时我的”功能可以正常工作，但它们不适用于在保存父对象之前添加的任何新字段/字段集

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

我试图应用于这些新创建的字段的JS函数如下所示，它包含在一个document ready中：

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

  });

});

我的想法是正确的吗？因为这在文档准备中，所以新字段没有被看到？我怎样才能让他们“被看见”

编辑：新版本的代码，在这里我会遇到奇怪的行为。只会看到第二个on change事件，然后根据更改的次数出现突出显示……因此，如果对票价字段进行了三次更改，它会“脉冲”三次显示黄色

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

  });

});

$（document）.on（'change'，'.ticketprice'，function（））{
$（this）.change（function（）{
var ticket_price=$（this.val（）；
如果（票价=0）
{
费率=0
} 
否则如果（票面价格>=0.01&&票面价格=25.01&&票面价格=40.01&&票面价格=60.01）
{
费率=0.06
}
var订票费=票价*费率
var customer_pays=票面浮动（票价）+票面浮动（预订费）
console.log（客户付费）；
var供应商费用=（客户支付/100）*3.5）+0.2
var供应商接收=（票面浮动（票面价格）-供应商费用）
控制台日志（预订费）；
控制台日志（供应商接收）；
$（this）.parent（）.next（）.children（'input.booking fee'）.val（booking_fee.toFixed（2））.effect（“highlight”，
{颜色：#FFFF33}，1500）；
$（this.parent（）.next（）.next（）.children（'input.vendor receives'）.val（vendor#u receives.toFixed（2））.effect（“highlight”，{color:#FFFF33”}，1500）；
});
});

执行以下操作：

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

通过这种方式，您没有将事件绑定到页面上当前的HTMLElements，而是告诉jQuery查看整个文档，以查看“ticket price”类中任何元素的更改。即使是动态添加的

---

下面是一个JSFIDLE示例：

好的，我认为您的问题是Javascript没有拾取动态添加的项

---

动态DOM

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

问题是，在更新DOM时，新元素没有绑定到加载文档时指定的任何函数，因此无法工作

正如另一个答案所指出的，解决方法是

将您的功能从文档委派给您希望更改的元素，如下所示：

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

我刚刚试一试，非常接近，但似乎只在变革事件中获得了第二个机会。有什么想法吗？你的意思是你必须改变两次才能实现？你能用新代码更新你原来的问题吗？我已经按要求添加了新代码。现在，它位于文档的外部，并已准备就绪。除了必须多次更改才能正常工作的问题之外，还有一个问题，那就是它在运行更改事件数的代码时出现了问题……因此我在突出显示时得到了一种奇怪的脉冲效果。我看到了问题。您必须删除第二个（
$（this）.change（function（）{
和倒数第二个
}）
代码行。您所做的是：您告诉javascript，当
文档
注意到具有
ticket price
类的元素被更改时，它应该将一个
change
事件绑定到该元素。因此，每次它更改时，都会绑定一个新事件。这就是为什么它只在第一次更改及其脉冲后才起作用.Cool，这是现在的重点。我不确定我是否完全理解它是如何识别.ticket price的哪个实例的。ticket price已更改，因为我原来的行是
$（'.ticket price'）。each（function（）{$（this）。change（function（）{
，其中each和this引用对我有意义。感谢您的帮助！