ajax 不会在后续的模态表单上触发答案

【问题标题】：ajax won't fire on subsequent modal formsajax 不会在后续的模态表单上触发
【发布时间】：2017-11-03 00:24:47
【问题描述】：

我在一个页面上列出了这个项目索引，在这个页面上每个项目都有一个链接，可以打开一个独特的模式。在这个模式中，我有一个 :username 文本字段和一个相应的 ajax 调用，因此当您键入 @username 时，您的朋友的用户名会弹出（新颖的想法，对吗？）。无论如何，它只适用于第一个 item-link-modal 组合，然后后续的 item/link/modal 组合不起作用。这就是我卡住的地方，非常感谢任何帮助：

模态部分：

<div class="modal fade" id="pirateinvite-<%= x.id %>" tabindex="-1" 
 role="dialog" aria-labelledby="pirateinviteLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="pirateinviteLabel">Invite a friend</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    blah blah

    <%= form_for @invitations, :url => invitations_path, :method => 'create', remote: true do |b| %>

    <div class="form-group"><center>
      <b><%= b.label :username, 'Invite by username:' %></b></center>
      <%= b.text_area :username, rows: 1, class: 'form-control', required: true, placeholder: "@user1 @user2" %>
      <%= b.hidden_field :event_id, :value => x.id %>
    </div>
    <div class="text-center">
    <%= b.submit 'Send an Invite!', class: 'btn btn-primary btn-sm align-self-center' %>
  <% end %></div>

  </div>
</div>

invitations.coffee

class @Invitation

@add_atwho = ->
$('#invitation_username').atwho
  at: '@'
  displayTpl:"<li class='mention-item' data-value='(${image},${name})'><img src=${image}>@${name}</li>",
  callbacks: remoteFilter: (query, callback) ->
    if (query.length < 1)
      return false
    else
      $.getJSON '/mentionsy', { q: query }, (data) ->
        callback data

jQuery ->
Invitation.add_atwho()

【问题讨论】：

标签： javascript jquery ruby-on-rails ajax coffeescript

【解决方案1】：

需要通过将模式中的每个 textarea id 更改为 <%= b.text_area :username, id: "invitation_username_#{+ x.id}", rows: 1, role: "textarea", class: 'form-control', required: true, placeholder: "@user1 @user2" %> 来使其唯一

需要更改 atwho listener 以收听所有这些独特的文本区域，例如：$('textarea[id^=invitation_username_]').atwho

【讨论】：