 <p>The problem is that you're producing this JavaScript inside the <code>onclick</code>:</p> <pre><code>alert_box(10,hello,134) </code></pre> <p>As you can see, you're trying to use a <em>variable</em> called <code>hello</code> there, you aren't using the string <code>'hello'</code>.</p> <p>To do so, you must put it in quotes. To do it reliably, you need to ensure that <code>"</code> and <code>&amp;</code> in them are replaced with HTML entities (<code>&amp;quot;</code>, <code>&amp;amp</code>), and ensure that if they have <code>'</code> in them, they're escaped with backslashes. You'll probably also want to convert line breaks in teh string (if there are any) into <code>\\n</code> sequences and so on. It's a real pain, basically. (This advice assumes you'll continue to use <code>"</code> as the quote around the attribute and that you'll use <code>'</code> as the quote around the JavaScript string.)</p> <p>So:</p> <pre><code>var value_1 = 10; var value_2 = 'hello'; var value_3 = 134; $('#Blocks' + IJ).append( '&lt;span onclick="alert_box(' + value_1 + ',\'' + value_2.replace(/&amp;/g, "&amp;amp;").replace(/"/g, "&amp;quot;").replace(/'/g, "\\'").replace(/[\r\n]+/g, '\\n') + '\',' + value_3 + ')"&gt;&lt;/span&gt;' ); function alert_box(a, b, c) { alert(c); } </code></pre> <p><strong>Live Example:</strong></p> <p><div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var value_1 = 10; var value_2 = 'hello'; var value_3 = 134; var IJ = 1; $('#Blocks' + IJ).append( '&lt;span onclick="alert_box(' + value_1 + ',\'' + value_2.replace(/&amp;/g, "&amp;amp;").replace(/"/g, "&amp;quot;").replace(/'/g, "\\'").replace(/[\r\n]+/g, '\\n') + '\',' + value_3 + ')"&gt;click me&lt;/span&gt;' ); function alert_box(a, b, c) { alert("a = " + a + ", b = " + b + ", c = " + c); }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="Blocks1"&gt;&lt;/div&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre> </div> </div> </p> <hr> <p><strong><em>But</em></strong>, it would be <strong>much</strong> better not to use <code>onclick</code> at all, which bypasses all of those hassles:</p> <pre><code>var value_1 = 10; var value_2 = 'hello'; var value_3 = 134; $("&lt;span&gt;") .on("click", function() { alert_box(value_1, value_2, value_3); }) .appendTo('#Blocks' + IJ); function alert_box(a, b, c) { alert(c); } </code></pre> <p><strong>Live Example</strong>:</p> <p><div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var value_1 = 10; var value_2 = 'hello'; var value_3 = 134; var IJ = 1; $("&lt;span&gt;") .text("click me") .on("click", function() { alert_box(value_1, value_2, value_3); }) .appendTo('#Blocks' + IJ); function alert_box(a, b, c) { alert("a = " + a + ", b = " + b + ", c = " + c); }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="Blocks1"&gt;&lt;/div&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre> </div> </div> </p> <hr> <p>The above assumes that the values of <code>value_1</code>, <code>value_2</code>, and <code>value_3</code> don't change after you've hooked up the handler. If they may, we can use a builder function to ensure we use the version as of when we hooked up the handler rather than the version as of when the click event happens:</p> <pre><code>var value_1 = 10; var value_2 = 'hello'; var value_3 = 134; $("&lt;span&gt;") .on("click", buildHandler(value_1, value_2, value_3)) .appendTo('#Blocks' + IJ); function alert_box(a, b, c) { alert(c); } function buildHandler(v1, v2, v3) { return function() { alert_box.call(this, v1, v2, v3); }; } </code></pre> <p><strong>Live Example:</strong></p> <p><div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var value_1 = 10; var value_2 = 'hello'; var value_3 = 134; var IJ = 1; $("&lt;span&gt;") .text("click me") .on("click", buildHandler(value_1, value_2, value_3)) .appendTo('#Blocks' + IJ); value_1 = value_2 = value_3 = "changed"; // Just to prove we don't use them function alert_box(a, b, c) { alert("a = " + a + ", b = " + b + ", c = " + c); } function buildHandler(v1, v2, v3) { return function() { alert_box.call(this, v1, v2, v3); }; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="Blocks1"&gt;&lt;/div&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre> </div> </div> </p>