Lokaler Speicherfehler

Question

Bitte jemand sagen mir, was ist das Problem in dem Code, den ich geschrieben habe.

Js

$("button").click(function() { 
      document.getElementById("demo").innerHTML = document.getElementById("asd").value; 
     }); 
     $(function() { 
      var edit = document.getElementById('demo'); 
      $(edit).blur(function() { 
       localStorage.setItem("data1", this.innerHTML) 
      }); 
      if (localStorage.getItem("data1")) { 
       edit.innerHTML = localStorage.getItem("data1"); 
      } 
     }); 

Html

<input type="text" id="asd"> 
<button>asdsad</button> 
<p id="demo"></p> 

Aber der gleiche Code funktioniert perfekt in diese:

Js

$(function() { 
      var edit = document.getElementById('demo'); 
      $(edit).blur(function() { 
       localStorage.setItem("data1", document.getElementById("demo").innerHTML) 
      }); 
      if (localStorage.getItem("data1")) { 
       edit.innerHTML = localStorage.getItem("data1"); 
      } 
     }); 

HTML

<div contenteditable="true" id="demo">Some text here</div> 

Bitte sagen Sie mir, was hier schief gelaufen ist.

Answer 1

Wenn Sie die edit Variable (die ein DOM-Element enthält) in jQuery als Argument übergeben, wird ein jQuery-Objekt zurückgegeben. Das ändert den Bereich von this in Ihrem blur-Ereignis in einem jQuery-Objekt. jQuery hat keine Eigenschaft innerHTML, also gibt es undefined zurück. JavaScript DOM Elemente haben natürlich eine innerHTML Eigenschaft, deshalb funktioniert das zweite Beispiel.

Eine Möglichkeit, Ihr erstes Beispiel zu beheben, ist diese zu ersetzen:

$(edit).blur(function() { 
    localStorage.setItem("data1", this.innerHTML) 
}); 

mit diesem:

$(edit).blur(function() { 
    localStorage.setItem("data1", $(this).html()); 
});