[Гробовщик]

Пытаюсь написать код, что бы при нажатии на кнопку добавлялись поля в таблицу, но вот возник такой вопрос если повешать событие click на тег <p> то событие отрабатывается почти как надо

$(document).ready(function(){
    $("p#append").click(function() {
        $(this).append("<tr><td>Наименование материала:</td><td><input type='text' maxlength='25' size='40'></td></tr>");
   
    });
});

<p id="append">некий текст</p>

Но если это же событие привязать к <input> то событие перестаёт отрабатываться, хотя код проходит и не виснет на данной строке (возможно потому что событие в первом случае возникает в теге <p>)

$( init );
	function init() {
	  $('#myButton').click(function() { 
        $(this).append("<tr><td>Наименование материала:</td><td><input type='text' maxlength='25' size='40'></td></tr>");    
alert( "Всем - привет!" );    
   });
	}

<input type="submit" id="myButton" value="Нажми и удивись:)"" name="button">

А как можно сделать так что бы событие выводилось отдельно и работало при нажатии на кнопку?