Trying to delete comments as they are rendered via Jquery in my Raiks App

user_8786168 0
Viewed 22

I have a Rails Recipe Manager project I am working on, now in the process of implementing jquery/ajax to show resources without a page refresh (course requirement, I cannot use remote=true)

So my issue now is with deleting comments, I am able to create comments just fine and delete them as well but only if i refresh the page after creating them. For some reason, my click event cannot be activated unless i refresh. Here is my code:

$(function createComment() {
    $("#new_comment").on("submit", function(e) {
        e.preventDefault();

        const values = $(this).serialize()

        $.post(this.action, values).success(function(response) {

            $('div.comments_container').append('<div class="new_comment_' + `${response.id}` + '"> </div>')

            $('div.new_comment_'+ `${response.id}`).append('<h3 class="cheading">' + ` ${response.user.name}` + ' gives' + ` ${response.rating}` + ' out of 5 stars! </h3>')
            $('div.new_comment_'+ `${response.id}`).append('<p class="cdescription">' + `${response.description}` + '</p>')
            $('div.new_comment_'+ `${response.id}`).append('<a class="ecomment" href="/recipes/' + `${response.recipe_id}` + '/comments/' + `${response.id}` + '/edit">Edit</a>' + " ")
            $('div.new_comment_'+ `${response.id}`).append('<a class="dcomment" rel="nofollow" data-method="delete" href="/comments/' + `${response.id}` + '">Delete</a>')

        });

        $('form#new_comment')[0].reset();

    });
});


$(function deleteComment() {
    $('a.dcomment').on("click", function(e){
        e.preventDefault();

        var r = confirm("Delete this comment?");
        if (r == true) {
            $(this).parent().hide("slow");
        }
        else {
            return false;
        }
    });
});

my full repo is at: https://github.com/Bartekswistak/fun_guy_chef/tree/jquery

ruby-on-rails jquery
1 Answers

Your element doesn't exist till you click the button and run the function deleteComment(), so you can't bind the click event to an element that doesn't exist yet, try this one: 

$(function deleteComment() {
  $('body').on("click",'a.dcomment', function(e){
    e.preventDefault();

  var r = confirm("Delete this comment?");
    if (r == true) {
      $(this).parent().hide("slow");
      }
      else {
        return false;
      }
  });
});

full code: 

$(function createComment() {
 $("#new_comment").on("submit", function(e) {
 e.preventDefault();

const values = $(this).serialize()

$.post(this.action, values).success(function(response) {

  $('div.comments_container').append('<div class="new_comment_' + `${response.id}` + '"> </div>')

  $('div.new_comment_'+ `${response.id}`).append('<h3 class="cheading">' + ` ${response.user.name}` + ' gives' + ` ${response.rating}` + ' out of 5 stars! </h3>')
  $('div.new_comment_'+ `${response.id}`).append('<p class="cdescription">' + `${response.description}` + '</p>')
  $('div.new_comment_'+ `${response.id}`).append('<a class="ecomment" href="/recipes/' + `${response.recipe_id}` + '/comments/' + `${response.id}` + '/edit">Edit</a>' + " ")
  $('div.new_comment_'+ `${response.id}`).append('<a class="dcomment" rel="nofollow" data-method="delete" href="/comments/' + `${response.id}` + '">Delete</a>')

     });

    $('form#new_comment')[0].reset();

     });
});


$(function deleteComment() {
  $('body').on("click",'a.dcomment', function(e){
    e.preventDefault();

  var r = confirm("Delete this comment?");
    if (r == true) {
      $(this).parent().hide("slow");
      }
      else {
        return false;
      }
  });
});
user_45502520
Related