JS - accessing global variable issue
<p>Best described by example:</p>

<p>I have the following piece of code:</p>

<pre><code>/* YIELDS ERROR
$('body').on('DOMNodeInserted', '.zeon-merchandise-measure', function () {
    dropdownCssClass : 'zeon-select2-dropdown',
    data: merchandise_measures
});
*/

// OK
$(".zeon-merchandise-measure").select2({
  dropdownCssClass : 'zeon-select2-dropdown',
  data: merchandise_measures
});
</code></pre>

<p>I can't undesrand what is wrong with scope. The second function works ok, while <code>DOMNodeInserted</code>-part cannot recognize <code>merchandise_measures</code></p>

<p>Here's how `merchandise_measures is defined (html page being loaded)</p>

<pre><code>&lt;script type="text/javascript"&gt;
            // A global variables
            merchandise_measures = {{ merchandise_measures_json|safe }};
&lt;/script&gt;
</code></pre>

<p>What am I doing wrong?</p>