Javascript 将jQuery“on”与动态内容一起使用时出错

我目前正在构建一个rails应用程序，该应用程序处理动态生成的表单。我一直在学习railscasts教程，并将coffeescript转录到常规JS中

我有一个简单的HTML结构，看起来与此类似。为了简洁起见，我缩短了它

<form>
    <fieldset>
        <input>
        <a class="remove_fields"> Remove </a>
    </fieldset>

</form>

<a class="add_fields"> Add fields </a>

但是，当我运行这段代码时，会收到一条警告，提示将空字符串传递给getElementById，并且代码不会运行或记录字符串的工作情况！到控制台。奇怪的是，一个警告显然破坏了代码，并且没有给我任何错误

如果我使用$'form'。单击函数。。。除了动态生成的s不会绑定到事件之外，所有操作都正常工作

我想知道对$this的引用是否是指$form对象而不是$'.remove_fields'对象

我使用的是Firefox，如果那有用的话

谢谢

编辑：如果有用的话，下面是实际表单生成器的外观

  <fieldset>
  <div class="field third">
    <%= f.label :weekday %>
    <%= f.collection_select(:weekday_id, Weekday.all, :id, :day, class: 'input') %>
  </div>
  <div class="field third">
    <%= f.label :start_time %>
    <%= f.select(:start_time, Classtime::TIMES) %>
  </div>
  <div class="field third">
    <%= f.label :end_time %>
    <%= f.select(:end_time, Classtime::TIMES) %>
  </div>
  <%= f.hidden_field :_destroy %>
  <%= link_to 'remove','#', class: 'remove_fields' %>
</fieldset>

HTML

---

注意包含了id属性，并使用tagid属性作为选择器。还有使用.prev而不是.closest。

我已经设法解决了这个问题

它与作为锚的.remove_fields元素有关。我只是把它改成了一个div，并对它进行了一个小小的修改——我使用了$form而不是$fieldset

---

我不知道为什么它不能成为链接-如果有人有更好的解释，我很乐意更改我接受的答案。

等一下，该错误似乎与此代码没有任何关系，哪里都没有ID？另外，您说它可以工作，但是字段集不是单击的锚的父级，没有办法工作？使用我的代码更新，没有错误，对不起。您可以在codepen.io上复制这个问题吗？试试：$document.on'click'，'remove_fields'，functionevent{我很好奇，为什么文档会起作用而不是表单？您读过吗？因为五月字段集将动态生成，所以此代码永远无法在未来的elments上工作。谢谢您的回答。但是，Mark是对的。此代码将无法处理进一步生成的remove_字段实例。

  <fieldset>
  <div class="field third">
    <%= f.label :weekday %>
    <%= f.collection_select(:weekday_id, Weekday.all, :id, :day, class: 'input') %>
  </div>
  <div class="field third">
    <%= f.label :start_time %>
    <%= f.select(:start_time, Classtime::TIMES) %>
  </div>
  <div class="field third">
    <%= f.label :end_time %>
    <%= f.select(:end_time, Classtime::TIMES) %>
  </div>
  <%= f.hidden_field :_destroy %>
  <%= link_to 'remove','#', class: 'remove_fields' %>
</fieldset>

<form>
    <fieldset>
        <input>
    </fieldset>
    <a id="remove_fields"> Remove </a>
</form>
<a class="add_fields">Add fields </a>

$('#remove_fields').on('click',function(event) {
  $(this).prev('fieldset').hide();
  event.preventDefault(); 
  console.log('works!');
});