初始页面加载后未添加 jQuery 元素的 onclick 事件

Question

在我们的 rails 应用程序中，我们有一个 table，其中每个 tbody 行都是一个嵌套字段。我想根据当前字段数限制嵌套字段。为此，我正在关注 nested_form 文档提供的 this guide。

为了更好地适应我们的应用程序，我修改了下面的代码。

// app/views/users/index.html.haml
:javascript
  $(function() { limitNestedFields('#{@tenant.max_users}'); })

// app/assets/javascripts/limit_nested_fields.js
function limitNestedFields(limitingFactor) {
  var fieldsCount = $('tr.fields').length,
      maxFieldsCount = limitingFactor,
      $addLink = $('.add_nested_fields');
  function toggleAddLink() {
    $addLink.toggle(fieldsCount <= maxFieldsCount)
  }
  $addLink.click(function() {
    console.log("ADDING FIELD");
    if(fieldsCount < limitingFactor){
      fieldsCount += 1;
    }
    toggleAddLink();
  });
  $('.remove_nested_field').click(function() {
    console.log("REMOVING FIELD");
    fieldsCount -= 1;
    toggleAddLink();
  });
  toggleAddLink();
}

在插入控制台语句时，我可以看到单击 $addLink 按预期工作。当我达到 limitingFactor tbody 行数时，$addLink 按钮消失。但是，如果我单击 $('.remove_nested_field') 如果它出现在页面加载时 。

，我只会收到日志语句

这很重要，因为假设一个租户可能只有 10 个用户，而目前有 6 个。假设他们在点击更新之前添加了 4 行嵌套字段（4 个用户）。 "Add User" 按钮 ($addLink) 将切换隐藏。如果他们错误地填写了一个嵌套字段并希望删除一个 ($('.remove_nested_field'))，那么 "Add User" 只有在他们在添加 [=30] 之前单击 原始 6 行之一时才会出现=].

Answer 1

尝试替换

$('<selector>').click(function() {

和

$(document).delegate('<selector>', 'click', function() {

这应该在该脚本最初运行之后添加的元素上触发。

说明：当您执行 .click 时，您是在将事件添加到已知的特定元素列表中。如果您添加新元素，即使它们与该选择器匹配，它们也没有事件。

使用 .delegate，您将一个事件放到整个 DOM（又名文档）上，说 "when we get a click, see if it's on this selector and if so do this function"。因此，因为选择器检查发生在点击之后，所以它包括之后添加的选择器。

函数 .on 具有类似的模式，应该用于代替 jquery 更现代版本的委托：http://api.jquery.com/delegate/

初始页面加载后未添加 jQuery 元素的 onclick 事件

No onclick event for jQuery element added after initial page load

jquery

ruby-on-rails

nested-forms