0

我觉得这个问题的解决方案应该很简单，但我一生都无法弄清楚。这是设置：

我有一个保存了一些闹钟时间的数据库。在我的网站上，有一个 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();
        });
}
4

1 回答 1

0

我的第一个想法是使用可以传递给加载的回调函数。我相信这是一个异步调用，并且您的按钮化元素的代码可能在响应返回之前或在响应添加到 DOM 之前运行。

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/

于 2013-05-25T03:51:04.667 回答