JQUERY appending a button with onClick event and passing javascript variable in it

Question

parameters=eval([[\"April\",[[\"medical\",\"1\"],[\"financial\",\"4\"],[\"burial\",\"1\"]]],[\"May\",[[\"medical\",\"2\"],[\"financial\",\"6\"],[\"burial\",\"6\"]]]]);   

<input type="submit" value="Pie Chart" onClick="showChart('<?php echo $title;?>',parameters,'#container','chart','Pie Chart')"/>

this works fine when I'm just including this into my html code. but I want to append this into a specific div using javascript or jquery. like this.

<script>
    parameter=eval("[[\"April\",[[\"medical\",\"1\"],[\"financial\",\"4\"],[\"burial\",\"1\"]]],[\"May\",[[\"medical\",\"2\"],[\"financial\",\"6\"],[\"burial\",\"6\"]]]]");

    myButton="<input type="submit" value="Pie Chart" onClick="showChart('<?php echo $title;?>',parameters,'#container','chart','Pie Chart')"/>";
    $('#content').append(myButton);
</script>

My problem is, it does not perform the function whenever I click the button. Maybe because of the variable parameter that I passed and my question is how can I do this correctly? And I'm avoiding using ajax cause it will affect a big portion of my codes.

never use - eval - http://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea — Harpreet Singh, Jun 24 '14 at 05:52
i used eval to convert the returned json-encode into a javascript object. it worked in hmtl way, so in script i should not use it? — ssie_28, Jun 24 '14 at 06:00

score 1 · Answer 1 · answered Jun 24 '14 at 05:54

Try this : use escape characters and add parameter variable using plus operator

<script>
    parameter=eval("[[\"April\",[[\"medical\",\"1\"],[\"financial\",\"4\"],[\"burial\",\"1\"]]],[\"May\",[[\"medical\",\"2\"],[\"financial\",\"6\"],[\"burial\",\"6\"]]]]");

    myButton="<input type=\"submit\" value=\"Pie Chart\" onClick=\"showChart('<?php echo $title;?>',"+parameters+",'#container','chart','Pie Chart')\"/>";
    $('#content').append(myButton);
</script>

score 0 · Answer 2 · answered Jun 24 '14 at 05:58

jQuery('#yourbutton').on('click', function() {           
   });  // your on click event
  //to add content to innerhtml of div:
  jQuery('#divelementorother').html(jQuery('#divelementorother').html() +   YourDataToInside);

First, you see the .on function of jQuery to get an event handler on click to execute function. You can append that as JavaScript to the html of div, so you doesn`t have to use the button itselfs onclick

Second, to extend the innerhtml or html of an elemnt like , you've to use .html(data) . Or, i see above my post: you can use append.

Greetings

JQUERY appending a button with onClick event and passing javascript variable in it

2 Answers2