如何使用jQuery编辑评论？

Max 发表于 Dev

最高

<!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() { });为$(document).on('click', selector, function() { });

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。