Speichern von Variablen via .text() ist nicht aktuell

Question

Ich habe <span> Tags in einem Div, das entfernt wird, wenn der Benutzer auf sie klickt. Funktioniert gut.

Ich möchte die .text() in diesem div in einer Variablen speichern. Das Problem ist, dass der aktualisierte Text nicht gespeichert wird. Klicken Sie auf ein Wort, um es in diesem jsFiddle zu entfernen.

Wie Sie sehen können, gibt die content Variable den alten Text zurück, nicht den neuen überarbeiteten.

Wie kann ich eine Variable mit dem aktualisierten Text speichern?

jQuery:

jQuery(document).ready(function() { 

    jQuery(document).on("mousedown", ".hello span", function() { 

     // don't add full stop at the end of sentence if it already ends with 
     var endChars = [".", "?", "!"]; 

     jQuery(this).fadeOut(function(){ 
      var parentObj = jQuery(this).parent(); 
      jQuery(this).remove(); 
      var text = parentObj.find("span").first().html(); 
      parentObj.find("span").first().html(ta_capitalizeFirstLetter(text)); 
      text = parentObj.find("span").last().html(); 
      if (endChars.indexOf(text.slice(-1)) == -1) 
      { 
       parentObj.find("span").last().html(text+"."); 
      } 
     }); 

     var content = jQuery(this).parent().parent().find('.hello').text(); 

     alert(content); 

    }); 
}); 

Answer 1

Der Code rufen Sie den neuen Text bekommen sollte innen verschoben werden die fadeOut Rückruf. Sobald die Animation abgeschlossen und das Element entfernt wurde, wird der innere Text des übergeordneten Elements aktualisiert. Zu diesem Zeitpunkt sollte der aktualisierte Inhalt aus dem DOM gelesen werden.

Demo

// Cache the element 
var $el = jQuery(this).parent().parent().find('.hello'); 

jQuery(this).fadeOut(function() { 
    jQuery(this).remove(); 
    // Irrelevant code removed from here 
    ... 

    var content = $el.text(); 
    alert(content); 
}); 

Hier ist ein andere einfache Demo mit minimalem Code, den Code besser zu verstehen, wird helfen.

Demo

Answer 2

Ich habe versucht, Ihre jsfiddle in Chrom zu debuggen, und es sieht aus wie die Priorität des Codes ist wie folgt:

1. auf dieses Ereignis erklären - jQuery(this).fadeOut(function(){

2. erhalten Sie die aktuellen Daten des div var content = jQuery(this).parent().parent().find('.hello').text();.

3. warnen Sie Ihre Daten ohne Änderungen.

4. Aufruf der funcntion von fadeout

denke ich, alles, was Sie tun müssen, ist Ihre Warnung und 2 aus dem anonymen Funktion von Fadeout

Answer 3

Gerade innerhalb der Callback setzen Ihre Warnung:

jQuery(this).fadeOut(function(){ 
    var parentObj = jQuery(this).parent(); 
    jQuery(this).remove(); 
    var text = parentObj.find("span").first().html(); 
    parentObj.find("span").first().html(ta_capitalizeFirstLetter(text)); 
    text = parentObj.find("span").last().html(); 
    if (endChars.indexOf(text.slice(-1)) == -1) { 
    parentObj.find("span").last().html(text+"."); 
    var content = parentObj.parent().find('.hello').text(); 
    alert(content); 
    } 
});