Question

我目前正在构建一个处理动态生成表单的rails应用程序（我一直在关注railscasts教程，并且我已将coffeescript转录为常规JS）

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

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

</form>

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

第一个a类使用以下javascript查找并隐藏最近的fieldset项。我使用.on而不是.click，因为可能会动态生成字段集。

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

但是，当我运行此代码时，我收到Empty string passed to getElementById()的警告，并且代码未运行或将字符串works!记录到控制台。很奇怪，警告显然打破了代码并且没有错误。

如果我使用$('form').click(function()...一切正常，除了动态生成的<fieldset>不会绑定到事件的事实。

我想知道$(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>

Answer 1

HTML

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

使用Javascript：

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

请注意，id属性的使用以及<a>标记id属性的使用作为选择器。还使用.prev()代替.closest()。

Answer 2

我设法弄明白了。

它与.remove_fields元素anchor有关。我只是将其更改为div并使用了一个小修改 - 我使用$(form)代替$(fieldset)

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

使用jQuery＆＃34; on＆＃34;时出错动态内容

2 个答案: