Popover中的Rails Ajax Partial：重新打开Popover时，jQuery更改消失； 更改仅在页面上显示

Question

I've got a partial I am loading into to the data content for a popover. In the popover, I have a ajax delete action for a list element in the partial that re-renders the new updated partial. However, when the popover is closed and re-opened, the jQuery changes made by the delete action disappear, and the partial looks as though the delete never happened. Why?

My action:

def destroy
  @notification = Notification.find(params[:id])
  @notification.destroy
  @notification.save

  @notifications = current_user.notifications
  respond_to do |format|
    format.js { render template: "notifications/destroy", :layout => false }
  end
end

My destroy.js.erb :

$('div#notifications-list').html($("<%= j render partial: 'notifications/notifications', locals: { notifications: @notifications } %>"))

The popover is called when this link is clicked; this forwards to the action index :

<li><%= link_to current_user.notifications.where(read: false).count.to_s, notifications_path, :class => "glyphicon glyphicon-flag notifications", :title => 'Notifications', "data-content" => "#{render   partial: 'notifications/notifications', locals: { notifications: current_user.notifications }}" , rel:   'popover', 'data-toggle'=>"popover", id: 'notifications', remote: true %>
</li>

index action:

def index
  @notifications = current_user.notifications

  @notifications.each do |notification|
    notification.update_attribute(:read, true)
  end

  @unread_count = @notifications.where(read: false).count

  respond_to do |format|
    format.js { }
  end
end

index.js.erb :

$('#notifications').text('<%= j @unread_count.to_s %>');

And the popover is called in a .js file in the asset pipeline, here:

$(document).ready(function() {
  $("a#notifications").popover({ 
    trigger: 'click',
      'container': "body",
      'placement': "bottom",
    html: true}).on("show.bs.popover", function(){ $(this).data("bs.popover").tip().css("max-width",   "300px"); 
  });
});

The development log says the destroy.js.erb is rendered fine, same with the index action. But for whatever reason, until the page reload the jQuery that was done in the delete action doesn't show.I've tried many things but I really can't figure out why this isn't working. Can someone please help?

Answer 1

I found the solution and have posted it here in case anyone has a similar problem. Just had to replace the div with the updated @notifications from the index action in index.js.erb :

$('div#notifications-list').html($("<%= j render partial: 'notifications/notifications', locals: { notifications: @notifications } %>"))