Почему заметки не добавляются, когда я нажимаю на тег "p"?

Question

 $(document).on("click", "p", function() {
    $("#notes").empty();
    alert("hello");
    var id = $(this).attr("data-id");

    $.ajax({
        method: "GET",
        url: "/articles/" + id
    }).then(function(data){
        console.log(data);

        $("#notes").append("<h2>" + data.title + "</h2>");
        $("#notes").append("<input id='titleinput' name='title' >");
        $("#notes").append("<textarea id='bodyinput' name='body'></textarea>");
        $("#notes").append("<button data-id='" + data._id + "' id='savenote'>Save Note</button>");

        if (data.note) {
            $("#titleinput").val(data.note.title);
            $("#bodyinput").val(data.note.body);
        }
    });
});

Когда я нажимаю на тег "p", ввод заметок должен появляться справа от текста, но это не так.Я не знаю, что я делаю неправильно, что мешает им появиться.Оповещение всплывает, поэтому с тегом все в порядке.Но почему не приходят заметки?