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

问题: 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...

问题:

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


回答1:

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;
      }
  });
});
  • 发表于 2019-01-17 19:56
  • 阅读 ( 204 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除