Une sauvegarde est enregistrée en utilisant le stockage local et JQuery

Question

J'essaye de charger un bouton sur la page en utilisant jQuery et quand quelqu'un clique sur ce bouton, je veux que la fonction onclick se produise et que la valeur d'identifiant soit enregistrée dans le stockage local. Cependant, cela me donne une valeur nulle une fois connecté à une console! Est-ce mal? Et comment puis-je y parvenir?

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

Votre code exécuté comme prévu.
Je pense que je sais ce qui vous fait penser qu'il ne fonctionne pas.
Cette ligne à l'intérieur de la balise <a>: script="onclick()=function(){localStorage.setItem("idd","' + id + '") Ce n'est pas un moyen d'attacher des gestionnaires d'événements.

Vous devez transmettre une référence de fonction à l'attribut avec le nom de l'événement.
Ainsi, au lieu de script=onclick...
Il devrait être: onclick='functionName(event)'
Une autre chose, est que vous devez empêcher la redirection vers le site Web pour donner le temps de mettre les choses dans le stockage local et seulement alors rediriger le client.
Vous pouvez donc utiliser le event.preventDefault() pour arrêter la redirection, puis récupérer l'URL de l'attribut href et définir le window.location.

Voici un exemple de travail avec votre code modifié (je ne peux pas utiliser le stockage local dans les extraits donc j'ai utilisé console.log):

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>