jQuery .on делегат не работает

Question

Я создал простой код, но кажется, что делегирование .on не работает? Пожалуйста помоги?

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> 

"Click Me!" кнопка должна предупредить атрибут ID кнопки, а кнопка добавления должна добавить еще один «Click Me!». с другим значением атрибута ID. http://jsfiddle.net/SrwrK/

Пожалуйста, обратите внимание, что я пытаюсь использовать обходной путь с помощью метода .live() jQuery, поскольку он устарел и удален из версии 1.9.

Answer 1

<input type="button" value="Click Me!" id="button0" class=".button" /> 

Этот код неверный - удалите "." от класса кнопок. Classnames получают только «.». в CSS-селекторах, например, в файле CSS или в инструкции селектора jQuery.

<input type="button" value="Click Me!" id="button0" class="button" /> 

Это будет работать. Кнопка вы создаете с JQuery имеет те же проблемы, так, чтобы она выглядела так:

$('<input type="button" value="Click Me!" class="button" />') 

Можно даже упростить это немного больше, как это:

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

Это позволит вам пропустить. attr().

Вот рабочий JSfiddle: "Click Me" http://jsfiddle.net/SrwrK/1/