javascript - jQuery .on delegate not working -

i created simple code seems .on delegation not work? please help?

html:

<input type="button" value="click me!" id="button0" class=".button" /> <br/><input type="button" value="add" id="add_button" /> <script>     var idx = 1;     $(document).ready(function(){         $(document.body).on('click',".button",function(){             alert(this.id);         });         $('#add_button').on('click',function(){             $('<input type="button" value="click me!" class=".button" />')                 .attr('id','button' + idx++)                 .insertbefore($(this).prev());         });     }); </script> 

the "click me!" button should alert id attribute of button, while add button should add "click me!" button different id attribute value. http://jsfiddle.net/srwrk/

please take note trying have workaround .live() method of jquery since has been deprecated , removed 1.9.

<input type="button" value="click me!" id="button0" class=".button" /> 

this code incorrect - remove "." in front of button class. classnames "." in css selectors in css file or in jquery selector statement.

<input type="button" value="click me!" id="button0" class="button" /> 

this work. button generate jquery has same problem, make this:

$('<input type="button" value="click me!" class="button" />') 

you simplify bit more this:

$('<input type="button" value="click me!" class="button" id="button' + idx++ + '" />') 

that let skip .attr() method.

here's working jsfiddle: http://jsfiddle.net/srwrk/1/