javascript - Javascript - ボタンをクリックするとコードが機能しなくなる

Question

ある種のカレンダーアプリを作成しようとしています。
空白のボックスをクリックすると、イベントを作成するためのフォームが表示されます。カレンダーをナビゲートするには、「ANTERIOR」または「SIGUIENTE」を使用します。
「ANTERIOR」または「SIGUIENTE」のいずれかをクリックするまでボックスをクリックすると、フォームが正しく表示され、その後動作しなくなります。
完全なコードは次のとおりです。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/calendar.css">
    <title></title>
</head>
<body>
    <div id="calendar">
    </div>

    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="js/calendar.js"></script>
</body>
</html>

calendar.js

// function to add days to date
Date.prototype.addDays=function(d){return new Date(this.valueOf()+864E5*d);};
Date.prototype.subtractDays=function(d){return new Date(this.valueOf()-864E5*d);};

// set initial variables
var longDays = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
var shortDays = ["Lun", "Mar", "Mie", "Jue", "Vie", "Sab"];
var months = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
var time = ['8<br>am', '9<br>am', '10<br>am', '11<br>am', '12<br>pm', '1<br>pm', '2<br>pm', '3<br>pm', '4<br>pm', '5<br>pm']
var weekStart = new Date();
weekStart = weekStart.subtractDays(weekStart.getDay() - 1);
var nav = '<div class="nav">\
    <button id="prev-week" class="nav-prev-btn"><< Anterior</button>\
    <button id="next-week" class="nav-next-btn">Siguiente >></button>\
    </div>';

function formatDate(date) {
    var month = date.getMonth();
    var date = date.getDate();
    return date.toString() + '/' + months[month];
}

function showCalendar(startDate) {

    var days = shortDays;
    if ($(window).width() > 640) {
        days = longDays;
    }

    var cal = document.createElement('div');
    cal.setAttribute('id', 'calendar-wrapper');

    var timeDiv = document.createElement('div');
    timeDiv.setAttribute('id', 'hours');
    timeDiv.className = "column time";
    var corner = document.createElement('div');
    corner.className = "box corner";
    timeDiv.appendChild(corner);
    for (i=0; i<10; i++) {
        var box = document.createElement('div');
        box.className = 'box';
        $(box).append("<p>" + time[i] + "</p>");
        timeDiv.appendChild(box);
    }
    $(cal).append(timeDiv);

    var tempDate = startDate;
    for (i=0; i<6; i++) {
        var dayContainer = document.createElement('div');
        dayContainer.className = "column day";
        var dayBox = document.createElement('div');
        dayBox.className = "box";
        var text = days[i] + "<br>" + formatDate(tempDate);
        $(dayBox).append(text);
        dayContainer.appendChild(dayBox);
        for (j=8; j<18; j++) {
            var box = document.createElement('div');
            box.className = "box available";
            box.setAttribute('data-year', tempDate.getFullYear());
            box.setAttribute('data-month', tempDate.getMonth());
            box.setAttribute('data-date', tempDate.getDate());
            box.setAttribute('data-hour', j);
            dayContainer.appendChild(box);
        }
        $(cal).append(dayContainer);
        tempDate = tempDate.addDays(1);
    }
    $('#calendar').append(cal);
}

function nextWeek() {
    $('#calendar-wrapper').remove();
    weekStart = weekStart.addDays(7);
    showCalendar(weekStart);
}
function prevWeek() {
    $('#calendar-wrapper').remove();
    weekStart = weekStart.subtractDays(7);
    showCalendar(weekStart);
}


function showAddEvent(data) {
    $('.new-event').remove();
    var date = data['date'] + '/' + (parseInt(data['month']) + 1) + '/' + data['year'];
    var time = data['hour'] + ':00';
    var form = '<form action="#" method="POST">\
        <label for="date">Fecha: <input type="text" name="date" value="' + date + '">\
        <label for="time">Hora: <input type="text" name="time" value="' + time + '">\
        <label for="comments">Observaciones: <textarea name="comments"></textarea>\
        <input class="submit-btn" type="submit" value="Enviar">\
        <button class="cancel-btn">Cancelar</button>\
        </form>';
    formWrapper = document.createElement('div');
    formWrapper.className = 'new-event';
    $(formWrapper).append(form);
    $('body').append(formWrapper);
}


$(document).ready(function() {

    $("#calendar").append(nav);
    // initiate the calendar
    showCalendar(weekStart);

    // previous week button handler
    $("#prev-week").click(function() {
        prevWeek();
    });

    // Next week button handler
    $("#next-week").click(function() {
        nextWeek();
    });

    $('.available').click(function() {
        var data = $(event.target).data();
        showAddEvent(data);
    });
});

score 1 · Accepted Answer

#prev-week問題は、または#next-week実際にクリックすると、既存の HTML の一部を削除する関数を呼び出して、クラス#calender-wrapper を持つ要素を含む新しいカレンダーラッパーを作成することです。.availabe

jQuery.clickイベントバインディングメソッドは、直接#calender-wrapperバインディングメソッドと呼ばれます。これは、 jQueryを削除したときにドキュメント上の既存の要素でのみ機能し.availabe、同じ名前の同じクラスがある場合でも、要素を新しいオブジェクトと見なします。

または、委任されたイベントを使用して、イベントハンドラーをアタッチします。お気に入り...

$( document ).on( "event-name", ".dynamic-element-selector", function() {
    ##code;
});

見てください、私は物事を完全には理解していません。なぜこれが起こるのか、しかしそれは本当です.

イベントハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出すときに存在している必要があります。要素が存在し、選択できるようにするには、HTML マークアップの要素の後にスクリプトを配置するか、ドキュメント対応ハンドラー内でイベントバインディングを実行します。または、委任されたイベントを使用して、イベントハンドラーをアタッチします。

ソース - jQuery .on() ドキュメント

アップデート：

スクリプトのこの部分を次から置き換えてください。

    $(document).ready(function() {

        $("#calendar").append(nav);
        // initiate the calendar
        showCalendar(weekStart);

        // previous week button handler
        $("#prev-week").click(function() {
            prevWeek();
        });

        // Next week button handler
        $("#next-week").click(function() {
            nextWeek();
        });

        $('.available').click(function() {
            var data = $(event.target).data();
            showAddEvent(data);
        });
    });

に：

    $(document).ready(function() {

        $("#calendar").append(nav);
        // initiate the calendar
        showCalendar(weekStart);

        // previous week button handler
        $("#prev-week").click(function() {
            prevWeek();
        });

        // Next week button handler
        $("#next-week").click(function() {
            nextWeek();
        });

        $(document).on('click', '.available', function() {
            var data = $(this).data();
            showAddEvent(data);
        });
    });

javascript - Javascript - ボタンをクリックするとコードが機能しなくなる

1 に答える 1

Related

Reference