jQuery -数据库访问失败后的更新按钮图标

我觉得这个问题的解决方案应该很简单，但是我怎么也想不出来。下面是设置:

我有一个保存了一些闹钟时间的数据库。在我的网站上，有一个id为#addTimeBtn的按钮，允许用户输入日期、时间和闹钟歌曲选择。一个脚本(包含在下面)通过将用户刚刚输入的信息添加到id为#alarmTimeList的div中来处理单击。在同一脚本中，我有一个函数，每60秒调用一次，通过php脚本查询数据库。这个函数从数据库中获取日期、时间和歌曲选择，并将它们添加到#alarmTimeList中。

这里的问题:#addTimeBtn和reloadAlarmTimes()在#alarmTimeListdiv中创建相同的代码。然而，当relaoadAlarmTimes()函数被调用时，由. deletebtn类标识的按钮不会通过jQuery函数来创建按钮。通过Chrome的开发人员工具检查，按钮的div已经创建，它只是没有通过jQuery UI的东西，使它时髦。创建按钮的代码在#addTimeBtn单击处理和reloadAlarmTimes()函数中是相同的，但只有第一个有效。想法吗?

代码如下:

$(document).ready(function(){
    //Make the date picker a jQuery datepicker object
    $("#dateInput").datepicker();
    //Set up the addTimeBtn
    $("#addTimeBtn")
        .button({icons: {primary: "ui-icon-plus", secondary: null} })
        .on('click', function() {
            //Get the inputs
            var date = $("input[id=dateInput]").val();
            var time = $("input[id=timeInput]").val();
            var song = $("#songInput").val();
            //Create list item code
            var alarmTimeCode = "<div class='listItem'>";
            alarmTimeCode += "<div class='date'>"+date+"</div>";
            alarmTimeCode += "<div class='time'>"+time+"</div>";
            alarmTimeCode += "<div class='song'>"+song+"</div>";
            alarmTimeCode += "<div class='deleteBtn'></div>";
            alarmTimeCode += "</div>";
            //Add the code to the window
            $(alarmTimeCode).appendTo("#alarmTimeList");
            //Set up the delete button
            $(".deleteBtn")
                .button({icons: {primary: "ui-icon-minus", secondary: null}})
                .on('click', function(){
                    $(this).parent("div").remove();
                });
            //Clean up
            $("input[id=dateInput]").val('');
            $("input[id=timeInput]").val('');
        });

    //Run the reloadAlarmTimes() function every 60 seconds
    reloadAlarmTimes();
    setInterval(reloadAlarmTimes, 60000);
});
function reloadAlarmTimes(){
    //Connect to DB, get data, load into AlarmTimeList
    $("#alarmTimeList").load("/scripts/getAllAlarmTimes.php");
    //Set up the delete button
    $(".deleteBtn")
        .button({icons: {primary: "ui-icon-minus", secondary: null}})
        .on('click', function(){
            $(this).parent("div").remove();
        });
}