如何使用jQuery编辑评论？

2019年7月20日 148次阅读 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <title></title>
</head>
<body>
<script type="text/javascript">
     $(function() {
      $('.companyInfo').append('<textarea value="save" class="textArea"></textarea>');
      $('.companyInfo').append('<button class="saveme">save</button>');
      $('.saveme').click(function() {
        var text = $('.textArea').val();
        $('.newDiv').append('<p><input type="button" class="edit" value="edit">'+text+'</p>');
      $('.edit').click(function() {
        var result = $(this).parent().text();
        var $textarea = $('<textarea class="textArea2"></textarea><button class="save">save</button>');
        $textarea.val(result) 
        $(this).parent().html($textarea);
          $('.save').click(function() {
            var textInner = $('.textArea2').val();
            $(this).parent().parent().html('<p><input type="button" class="edit" value="edit">'+textInner+'</p>');
          })
      })
      })
    })
</script>
    <div class='companyInfo'></div>

    <div class="newDiv"></div>

</body>
</html>

我正在尝试创建一个评论框,用户可以在其中添加评论,并可以在将评论保存到DOM后编辑评论.上述解决方案有效,但它只允许用户编辑一次注释,因此如果您尝试编辑注释两次,则不允许您这样做.

我无法弄清楚如何使编辑按钮更多地工作一次.有谁有想法怎么样？

最佳答案 您的方法只能运行一次,因为您在替换父标记的innerHTML时动态删除元素.因此,相关的事件监听器也会丢失.要解决此问题,请从$(selector).click(function(){})更改您的侦听器; to $(document).on(‘click’,selector,function(){});

点赞