2017-02-25 2 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> 

Ich versuche, ein Kommentarfeld zu erstellen, in dem Benutzer Kommentare hinzufügen und den Kommentar nach dem Speichern im DOM beliebig bearbeiten können. Die obige Lösung funktioniert, aber der Benutzer kann einen Kommentar nur einmal bearbeiten. Wenn Sie also versuchen, den Kommentar zweimal zu bearbeiten, können Sie dies nicht tun.Wie bearbeite ich einen Kommentar mit jQuery?

Ich kann nicht herausfinden, wie Sie die Bearbeitungsschaltfläche mehr nur einmal arbeiten. Hat jemand eine Idee wie?

Antwort

2

Ihr Ansatz funktioniert nur einmal, weil Sie Elemente dynamisch entfernen, wenn Sie innerHTML des übergeordneten Tags ersetzen. Somit geht auch der zugehörige Ereignis-Listener verloren. Um das Problem zu beheben, ändern Sie Ihre Listener von $(selector).click(function() { }); zu

+0

Ich versuchte, es hat nicht funktioniert. Ich bin mir nicht sicher, ob das so ist, weil es verschachtelt ist. – Max

+0

@Max Ich habe meine Antwort aktualisiert. Ich lese deine Frage noch einmal. Versuchen Sie es jetzt – mehulmpt

+0

Vielen Dank Mehul – Max

Verwandte Themen