چرا checkboxهایی که با js ساخته می شوند قابل کلیک نیستند؟

دوستان لطفا به کد من توجه کنید:

JS:

$("#one_to_many").on("click", function(){
    $( this ).html('<form action="demo_form.asp">\
      <input type="checkbox" name="graph" value="like"> case1<br>\
      <input type="checkbox" name="graph" value="comment" checked> case2<br>\
      <input type="checkbox" name="graph" value="friend" checked> case3<br>\
      <input type="button" value="go">\
     </form>');
});

CSS:

div{
  border:1px solid;
  text-align: center;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="one_to_many">click</div>

اگه خروجی کد بالا رو اینجا مشاهده کنید، میبینید که بعد از کلیک کردن روی اون باکس و ساخته شدن checkboxها، اونا قابل انتخاب کردن (تیک زدن) یا غیر فعال کردن نیستند. چرا؟ چطور می تونم این مشکل رو حل کنم؟

مشکل اینه:

می خوام htmlی (چک باکس ها - checkboxs) که با js تولید میشه رو قابل کلیک کنم همین.

چطور می تونم این کار رو انجام بدم؟ ممنون میشم راهنماییم کنید.