jquery 追加在 Rails ajax 视图中不起作用

Question

我的应用程序在 Rails 4.1.1 上 jquery。

该页面显示活动列表，每个活动都包含在一个部分中。

对于每个activity，用户可以添加一条新评论——link_to新评论方法的id是动态基于activityid的，即#newcomment_185.

对于每个 activity，评论都显示在列表中 --- ul 的 id 动态地基于 activity id，即 #commentslist_185.

_activity.html.erb (my activity partial)
<p>The activity content is here.
<%= link_to t('new_comment'), new_activity_comment_path(activity_id: activity.id), :id => "newcomment_#{activity.id}", remote: true, :class => "button tiny " %></p>
<ul id="commentslist_<%= activity.id %> "> Comments: <%= activity.comments.count %>
 <% activity.comments.each do |comment| %>
    <li> <%= comment.body %> (par <%= comment.commenter.name %>) </li> 
<% end %>
</ul>

comments_controller.erb
class CommentsController < ApplicationController
load_and_authorize_resource

  def new
    @comment = Comment.new commenter: current_user, activity_id: params[:activity_id]
    respond_to do |format|
      if request.xhr?
        format.js
        format.html { render layout: false }
      else
        format.js { render :action => 'new' }
        format.html { render 'new' }
        format.json { render json: @comment }
      end
    end
  end

  def create
    @comment = Comment.new(comment_params)
    @comment.commenter = current_user
    respond_to do |format|
      if @comment.save
        format.js
        format.html { redirect_to root_path, notice: 'Commentaire ajouté' }
      else
        format.js { render 'update' }
        format.html { render 'new' }
        format.json { render json: @comment.errors, status: :unprocessable_entity }
      end
    end
  end

  private

  def comment_params
    params.require(:comment).permit(:body, :activity_id, :commenter_id)
  end
end

/app/views/comments/new.js.erb
$('#newcomment_<%= @comment.activity_id.to_s %>').hide().after('<%= j render("form") %>');
$('#commentform').slideDown(350);

/app/views/comments/create.js.erb
$('#commentform_<%= @comment.activity_id.to_s %>').remove();
$('#newcomment_<%= @comment.activity_id.to_s %>').show();
$('#commentslist_<%= @comment.activity_id.to_s %> ul').append('<%= j render(@comment) %>');

问题出在最后一行 --- 除此以外一切正常。 li 元素未添加到 ul.

在 Chrome 控制台预览中，解析后的 js 似乎没问题：

$('#commentform_188').remove();
$('#newcomment_188').show();
$('#commentslist_188 ul').append('<li> test 1 (by John Doe) <\/li>');

没有任何错误信息。我已经尝试了最后一行的不同版本 --- 没有 ul，交替使用单引号和双引号等。我一无所知。感谢指点。

Answer 1

我认为您添加了一个额外的 space 破坏了您的选择器：

<="commentslist_<%= activity.id %> ">
<="commentslist_<%= activity.id %>">

jquery 追加在 Rails ajax 视图中不起作用

jquery append not working in Rails ajax view

ajax

jquery

ruby-on-rails-4