2017-02-25 187 views
4
<!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後儘可能多地編輯評論。上面的解決方案可以工作,但是它只允許用戶編輯評論一次,所以如果您嘗試編輯評論兩次,它不會讓你這樣做。如何使用jQuery編輯評論?

我無法弄清楚如何讓編輯按鈕工作一次。有沒有人有一個想法如何?

回答

2

您的方法只能使用一次,因爲您在替換父標記的innerHTML時動態刪除元素。因此,關聯的事件監聽器也會丟失。要解決此問題,請將您的聽衆從$(selector).click(function() { });更改爲$(document).on('click', selector, function() { });

+0

我試過了,它沒有工作。我不確定是否因爲它是嵌套的。 – Max

+0

@Max我更新了我的答案。我重新讀你的問題。立即嘗試 – mehulmpt

+0

非常感謝Mehul – Max