Ajout d'éléments dynamiques et définition d'une fonction onclick différente

Question

Je souhaite créer des éléments de liens dynamiques. J'ai créé une fonction qui crée un élément et attache une fonction onclick à elle:

for (var i = 7; i > 0; i--) { 
     var date = moment().add(-i, 'days') 
     var dateFormatted = date.format('YYYY-MM-DD'); 

     // Magic happens here 
     divDates.appendChild(createLink('<a href="#">' + dateFormatted + '</a>', 
      function() { alert(dateFormatted); })); 
    } 

function createLink(s, onClick) { 
    var a = document.createElement('a'); 
    if (s.indexOf('target="_blank"') >= 0) { 
     a.target = '_blank'; 
    } 

    var href = s.match(/href="([^"]*)/)[1]; 
    var text = s.match(/>([^<]*)/)[1]; 

    a.href = href; 
    a.title = text; 
    a.onclick = onClick; 
    a.appendChild(document.createTextNode(text)); 

    return a; 
} 

Cependant, le alert(dateFormatted) montre le même message, quel que je clique sur lien. Comment puis-je les faire travailler indépendamment?

Answer 1

Essayez ceci:

for (var i = 7; i > 0; i--) { 
    (function (i) { 
     var date = moment().add(-i, 'days') 
     var dateFormatted = date.format('YYYY-MM-DD'); 

     // Magic happens here 
     divDates.appendChild(createLink('<a href="#">' + dateFormatted + '</a>', 
      function() { alert(dateFormatted); })); 
    })(i); 
}