Question

我觉得解决这个问题应该很简单，但我不能为我的生活弄清楚。这是设置：

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

问题在于：＃addTimeBtn和reloadAlarmTimes（）在#alarmTimeList div中创建相同的代码。但是，当调用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();
        });
}

Answer 1

我的第一个想法是使用你可以传递加载的回调函数。我相信这是一个异步调用，并且你的代码可以在响应返回之前或者在响应添加到DOM之前运行。[/ p>

function reloadAlarmTimes(){
  //Connect to DB, get data, load into AlarmTimeList
  $("#alarmTimeList").load("/scripts/getAllAlarmTimes.php", function() {

      //Set up the delete button
      $(".deleteBtn")
        .button({icons: {primary: "ui-icon-minus", secondary: null}})
        .on('click', function(){
          $(this).parent("div").remove();
       });

  });
}

http://api.jquery.com/load/

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

1 个答案: