Cannot select a button which appended dynamically in jQuery

I use getJSON function in jQuery and append the retrieved result in the form of button in the DOM. however I cannot use the selector on the appended DOM.

here is my script:

$.getJSON("http://ift.tt/1wK2jnA" + localStorage.getItem("babyRegNo"), function(data) {
            if (data.indexOf("noDiary") > -1) {
                document.getElementById("diaryList").innerHTML = "<p>Your baby currently has no diary entry.</p>";
            } else {
                var appendedText = '';
                $.each(data, function(){
                    var diaryID = this.diary_id;
                    var dateAdded = this.date;
                    appendedText = appendedText + '<p><button type="button" class="diaries" value ="' + diaryID + '">' + dateAdded + '</button></p>';
                })
                document.getElementById("diaryList").innerHTML = appendedText;
            }
        })

this is what i use to select:

$(':button.diaries').click(function(){});

but it seems not working. however when I put a dummy button with the same class in the HTML body, it is selected perfectly. Can you guys give me any suggestion?