jquery .click() event not working

Question

This is my jquery code:

$(function(){
$.post("/person/keywords/get/", function(data){
    for(i=0; i<data.length; i++)
    {
        count = count + 1;
        $(".keywords-set").append('<div class="keyword-item"><span class="keyword" id="keyword-'+count+'">'+data[i]+'</span><textarea class="comment" id="comment-'+count+'"></textarea></div>');
    }
});

$(".keyword-sets").on('click', "[id^=keyword]", function(event) {
    event.preventDefault();
    alert("yes");
});
})

On page load, I fetch some datas from the server then append it to the html. The click event is not working for that appended html items. I'm getting this problem for all the items which I got from the server by .post() request.

Here is my complete and HTML and jQuery code:

https://gist.github.com/3023937

One more thing, I think the problem occurs bcoz of using the jQuery code inside the html(not as an external file). I'm having this similar type of code in another project where I'm having jquery code in external file and it works without any problem. Why is it so?

PS If you need any more details, I can give you.

Thanks!

Answer 1

This code:

$(".keyword-sets")

says "sets" plural, but I don't see that symbol anywhere else. Perhaps you meant:

$(".keyword-set").on("click", ...

edit — oops ".keywords-set" ...