Question

<!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后编辑评论。上述解决方案有效，但它只允许用户编辑一次注释，因此如果您尝试编辑注释两次，则不允许您这样做。

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

Answer 1

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

如何使用jQuery编辑评论？

1 个答案: