AJAX atw谁收听所有textarea id的

Question

I feel like this is so easy i should kick myself. I have this coffeescript:

class @Invitation

@add_atwho = ->
$('#invitation_username_1543').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()

And instead of listening to JUST #invitation_username_1543 i want to replace that 1543 with any id number on my page. I've got this partial modal rendering as well. The line in question that the coffeescript is listening to is the one with textarea id = "invitation_username_+#{x.id}". it works great for the modal with 1543 id being passed in to it, but nothing else!

<div class="modal fade" id="invite-<%= 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="inviteLabel">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">
        Text Text Text<br /><br />

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

        <div class="form-group"><center>
          <b><%= b.label :username, 'Invite a friend by username:' %></b></center>
           <%= b.text_area :username, id: "invitation_username_#{+ x.id}", rows: 1, role: "textarea", 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>
  </div>
</div>

Answer 1

You can use attribute begins with selector [attr^=value] to select elements where attr attribute begins with ^= attribute value

$("textarea[id^=invitation_username_]")

or

document.querySelectorAll("textarea[id^=invitation_username_]")