title: Passing JSON var in leaflet "on()" method
body: <p>I'm working (with Django framwork) on a map with the leaflet library, I want to show some text in a div when I click on a marker.</p>
  
  <p>I've made a JS function to create a div with some text in it:</p>
  
  <pre><code>function create_div(text):
  {
      div = document.createElement(div);
      div.id = 'article';
      div.textContent = text;
      document.body.appendChild(div);
  }
  </code></pre>
  
  <p>and then I call this function in the "on" methode given by leaflet
  because I want to call it when I click on a marker :</p>
  
  <pre><code>var articles = {{ list_json | safe }};
  for (var i = 0; i &lt; {{ nb_of_articles | safe }}; i++)
  {
      var text = articles[i].fields.text; //I put the text of the i-th marker in text.
      var lat = articles[i].fields.lat;
      var lon = articles[i].fields.lon;
      var marker = L.circleMarker([lat,lon]);
  
      marker.on('click', function(e) {create_div(text);} );
      marker.addTo(mymap);
  }
  </code></pre>
  
  <p>It kinda work but it puts the text of the last object in all the div associate with my marker.</p>
  
  <hr>
  
  <p>For example if I have:</p>
  
  <pre><code>article[0].fields.text = "hello"
  article[1].fields.text = "world"
  </code></pre>
  
  <p>I get "world" in the divs, regardless of the marker I click on.</p>
  
  <hr>
  
  <p>I would like "hello" in the div when I click on the first marker, and "world" in the div when I click on the second marker.</p>
  
  <p>Here is what it looks like after I click on any of the markers:</p>
  
  <p><img src="https://i.stack.imgur.com/dZBCv.png" alt="after I click"></p>
  
  <p>I hope I'm clear enough, please tell me if you need more information.</p>