ajax 不会触发后续模态表单

Question

我在一个页面上列出了这个项目索引，并且在这个页面上每个项目都有一个 link 弹出一个独特的模式。在此模式中，我有一个 :username 文本字段和一个相应的 ajax 调用，因此当您键入 @username 时，您朋友的用户名会弹出（新颖的想法，对吧？）。无论如何，它只适用于第一个项目-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()

Answer 1

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

来使模式中的每个文本区域 ID 唯一

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

ajax 不会触发后续模态表单

ajax won't fire on subsequent modal forms

javascript

ajax

jquery

ruby-on-rails

coffeescript