0

これに対する解決策は本当に簡単であるべきだと思いますが、私の人生ではそれを理解することはできません. セットアップは次のとおりです。

いくつかの目覚まし時計の時刻が保存されたデータベースがあります。私のウェブサイトには、ID #addTimeBtn のボタンがあり、ユーザーはアラームの日付、時刻、曲の選択を入力できます。スクリプト (以下に含まれる) は、ユーザーが入力したばかりの情報を id #alarmTimeList の div に追加することで、クリックを処理します。同じスクリプトで、php スクリプトを介してデータベースにクエリを実行するために 60 秒ごとに呼び出される関数があります。この関数は、データベースから日付、時刻、および曲の選択肢を取得し、#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