javascript - Javascript-单击按钮后代码停止工作

我正在尝试创建某种日历应用程序。
当您单击一个空白框时,它会显示一个创建事件的表单。
使用“前”或“SIGUIENTE”导航日历。
当您单击一个框,直到您单击“前”或“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>

日历.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);
    });
});

最佳答案

问题是当你点击#prev-week#next-week你实际上调用的函数删除了你现有的HTML的部分,即#calender-wrapper
然后创建一个新的日历包装器,它包含带有.availabe类的元素。
jQuery.click事件绑定方法称为直接绑定方法,仅在删除#calender-wrapper时才对文档中的existing元素起作用jQuery将.availabe元素视为新对象,即使它们具有相同名称的类。
或者,使用委派事件附加事件处理程序。就像。。。

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

听着,我不完全理解,为什么会这样,但这是真的。
事件处理程序仅绑定到当前选定的元素;它们必须在代码对.n()调用时存在。为了确保元素存在并且可以选择,请将脚本放在HTML标记中的元素之后,或者在文档就绪处理程序中执行事件绑定。或者,使用委派事件附加事件处理程序。
Source - jQuery .on() documentation
更新:
请从以下位置替换脚本的此部分:
    $(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);
        });
    });

本文翻译自 https://stackoverflow.com/questions/38857875/

网站遵循 CC BY-SA 4.0 协议,转载或引用请注明出处。

标签 javascript jquery html forms web-project


相关文章:

javascript - 需要帮助重复更新一些文本在Javascript中

jquery - 如何在单击时在弹出窗口中显示图像

javascript - 在mx:HTML的iframe中设置“ top.location === location”(并读取其跨域值)

javascript - 使用C#Restsharp,如何复制表单发布?

javascript - 使用jquery验证引擎主版验证星级

html - 试图使3个div居中于一个div中

javascript - 使用PHP在JSON中获取特定值

php - jQuery打字效果

javascript - 正则表达式匹配慢

jquery - 使用jquery工具创建模式形式,错误消息未隐藏的CSS问题