0

投稿にコメント機能を追加したいと考えています。コメントを一度追加すると、パーシャルはリロードせずにレンダリングされますが、別のコメントを追加すると、パーシャルのみがレンダリングされます (他には何もありません)。私が呼び出している create メソッドは次のとおりです。

  def create
    @comment = Comment.new(params[:comment])
    @snippet = @comment.snippet
    @comment.save
    @comment = Comment.new
    render :partial => "snippets/comment"
  end

Javascript:

$(document).ready( function(){
    save_comment();
});
function save_comment() {
    $("#new_comment").submit(function (e) {
        e.preventDefault();
        var url = "/comments/create";
        var post_data = $('#new_comment').serialize();
        logger(post_data);
        post_data = add_auth_token(post_data); // add authenticity token to post for forgery protection (works fine)
        $.post(url,
            post_data,
            function(data) {
                $("#comments_container").html(data);
                $("#comment_value").val("");
            });
    });
}

そしてフォーム

<%= form_for(@comment) do |f| %>
  <%= f.text_field :value %>
  <%= f.hidden_field :user_id, :value => current_user.id %>
  <%= f.hidden_field :snippet_id, :value => @snippet.id %>
  <div class="actions">
    <%= f.submit "Post" %>
  </div>
<% end %>
4

1 に答える 1

1

submitイベント リスナー コードが実行された後に html が追加されるため、後で DOM に追加される要素のイベント ハンドラーをアタッチできません。イベントをバインドするにはon API を使用する必要があります。これにより、後でドキュメントに追加される子孫要素からのイベントを処理できる委任イベント ハンドラーがアタッチされます。

あなたの場合、コードを次のように変更する必要があります。

$(document).ready( function(){
    save_comment();
});
function save_comment() {
    $(document).on("submit","#new_comment",function (e) {
        e.preventDefault();
        var url = "/comments/create";
        var post_data = $('#new_comment').serialize();
        logger(post_data);
        post_data = add_auth_token(post_data); // add authenticity token to post for forgery protection (works fine)
        $.post(url,
            post_data,
            function(data) {
                $("#comments_container").html(data);
                $("#comment_value").val("");
            });
    });
}
于 2012-04-15T11:51:34.833 に答える