Question

I’m trying to add a li to a list with jquery. When the user accepts a pending invitation, the invitation’s status is set to confirmed in the db, it is deleted from the “pending invitations” list on the page, and it appears in a separate UL below. All of this is working fine except the link in the newly-created li does not work. Or, rather, it works in terms of the deleting the item from the database, but it does not disappear from the screen. If I reload the page, it is gone. Here’s my code:

teams_controller.erb:

      def myteams
    action = params[:command]

    if (action == "accept")
      @invite = TeamUser.find(params[:id])
      @invite.confirmed = true
      @invite.save
      @newteam = @invite
    end

    if (action == "delete")
      @invite = TeamUser.find(params[:id])
      @team = Team.find(@invite.team_id)
      @invite.destroy
      if (@team.owner == current_user.id)
        @team.destroy
      end

    end

    @teams = current_user.teams

    respond_to do |format|
      format.html 
      format.js
      format.json { head :ok }
    end
  end

myteams.js.erb:

$('#<%= dom_id(@invite) %>').fadeOut(700);
<% if @newteam %>
 $('#acceptedList').append("<%= escape_javascript(render :partial => 'teaminlist', :locals => {:invite => @newteam})%>");
<% end %>

_teaminlist.html.erb:

<li class='team' id='<%= dom_id(invite) %>' >
  <h3>
  <% if invite.team.owner == current_user.id%><i><% end %>
  <%=link_to invite.team.name, 
          :controller => 'teams', :action => 'show', :id => invite.team.id %></i>
  <%=link_to image_tag('delete.png'), 
          {:controller => 'teams', :action => 'myteams', :id => invite.id, :command => 'delete'},
          :class => 'deleteTeam', :remote => true %>
</h3></li>

myteams.html.erb:

<h3>My Teams</h3>
<p id="notice"><%= notice %></p>


<p style='clear:both'></p><hr width='660'><BR>

<div class="post">
<h3 style="text-decoration:underline;">Pending Invitations:</h3>
<ul style="list-style-type:none; line-height:20pt;" id='inviteList'>
<% current_user.team_users.where("confirmed is null").order("created_at DESC").each do |invite|%>
  <li class='invite' id="<%= dom_id(invite) %>">
  <h3><%=link_to invite.team.name,
          :controller => "teams", :action => "show", :id => invite.team_id %>
  <%=link_to image_tag("checked.png", :size => "16x16"), 
          {:controller => "teams", :action => "myteams", :id =>invite.id, :command => "accept"}, 
          :class => "deleteTeam", :remote => true %>
  <%=link_to image_tag("delete.png"),
          {:controller => "teams", :action => "myteams", :id =>invite.id, :command => "delete"},
          :class => "deleteTeam", :remote => true %>
  </h3></li>
<% end %>
</ul>

<h3 style="text-decoration:underline;">My teams:</h3> <ul style='list-style-type: none; line-height:20pt;' id = 'acceptedList'>
<% current_user.team_users.where(:confirmed => true).order("created_at DESC").each do |invite| %>
  <li class='team' id="<%= dom_id(invite) %>" >
  <h3>
  <% if invite.team.owner == current_user.id%><i><% end %>
  <%=link_to invite.team.name, 
          :controller => "teams", :action => "show", :id => invite.team.id %></i>
  <%=link_to image_tag("delete.png"), 
          {:controller => "teams", :action => "myteams", :id => invite.id, :command => "delete"},
          :class => "deleteTeam", :remote => true %>
  </h3></li>
<% end %>

  </ul>

  <h3><center><%= link_to "Create a Team", new_team_path %></center></h3>
</div>

Once again, it is only the newly created li that does not respond when the “delete” icon is clicked. The existing li’s work fine. Help!

Answer 1

I don’t speak Ruby but it sounds to me you need to use $.on() because the element doesn’t exist when the DOM is first loaded.

$('li.team').on('click', '.deleteTeam', function() {
     // and the peasants rejoice!?
});

If you are on jquery version < 1.7.1 you should use:

$('.deleteTeam').live('click', function() {
     // and the peasants rejoice!?
});

credit keviv for acknowledging the little people.