Question

我有一个正在处理的Rails Recipe Manager项目，现在正在实现jquery / ajax以显示资源而无需刷新页面（课程要求，我不能使用remote = true）

所以我现在的问题是删除评论，我能够很好地创建评论并删除它们，但前提是我在创建评论后刷新页面。由于某种原因，除非刷新，否则无法激活我的点击事件。这是我的代码：

$(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;
        }
    });
});

我的完整回购位于：https://github.com/Bartekswistak/fun_guy_chef/tree/jquery

Answer 1

在单击按钮并运行功能deleteComment()之前，您的元素不存在，因此您无法将click事件绑定到尚不存在的元素，请尝试以下操作：

$(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;
      }
  });
});

完整代码：

$(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;
      }
  });
});

尝试删除通过Raiks App中的Jquery呈现的注释

1 个答案: