Eine Null wird mit lokalem Speicher und JQuery gespeichert

Question

Ich versuche, eine Schaltfläche auf der Seite mit jQuery zu laden, und wenn jemand auf diese Schaltfläche klickt, möchte ich die onclick Funktion passieren und ID-Wert im lokalen Speicher gespeichert werden.

Aber das gibt mir eine Null, wenn in einer Konsole angemeldet! Ist das falsch? Und wie kann ich das erreichen?

var str = '<div class="row"> 
    <div class="col-md-4"> 
    <div class="thumbnail"> 
    <img src="' + poster + '"alt="Poster_here"> 
    <div class="caption"><h3>' + title +'</h3><p>' + desc + '</p><p> 
    <a href="" class="btn btn-primary" role="button" 
    script="onclick()=function(){localStorage.setItem("idd","' + 
    id + '");' +'}">Read More and Explore</a> </p></div></div></div> 
    </div>'; 
    $('#add_all_here').append(str); 

HTML: -

<div class="container-fluid"> 
    <div id="add_all_here"> 

    </div> 
</div> 

Answer 1

Ihr Code laufen wie erwartet.
Ich denke, ich weiß, was Sie denken lässt, dass es nicht läuft.
Diese Zeile in der <a>-Tag: script="onclick()=function(){localStorage.setItem("idd","' + id + '") Dies ist keine Möglichkeit zum Anhängen von Ereignishandlern.

Sie müssen eine Funktionsreferenz an das Attribut mit dem Namen des Ereignisses übergeben.
Also statt script=onclick...
es sein sollte: onclick='functionName(event)'
Eine andere Sache ist, dass Sie die Umleitung auf die Website verhindern, müssen Zeit zu geben, die Dinge im lokalen Speicher zu setzen und nur dann den Client umgeleitet werden.
So können Sie die event.preventDefault() verwenden, um die Umleitung zu stoppen, und dann die URL von href Attribut und setzen Sie die window.location. Hier

ist ein funktionierendes Beispiel mit Ihrem geänderten Code (i nicht lokalen Speicher in Schnipsel verwenden können, so i console.log verwendet):

function setLocalStorage(e){ 
 
    e.preventDefault(); 
 
    var id = e.target.getAttribute('data-id'); 
 
    var url = e.target.href; 
 
    console.log('saving id - ' + id); 
 
    console.log('redirecting to - ' + url); 
 
    //window.location = url; //this will redirect 
 
} 
 

 
var poster = 'sdsd', 
 
    title = 'blah', 
 
    desc= 'skjdksdj ksjd ', 
 
    id= 457 
 

 
var str = '<div class="row"><div class="col-md-4"> <div class="thumbnail"> <img src="' + poster + '"alt="Poster_here"><div class="caption"><h3>' + title +'</h3><p>' + desc + '</p><p><a href="http://example.com" class="btn btn-primary" data-id="' + id + '" role="button" onclick="setLocalStorage(event)">Read More and Explore</a> </p></div></div></div></div>'; 
 
$('#add_all_here').append(str);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div id="add_all_here"> 
 

 
    </div> 
 
</div>