Fatal编程技术网
  • javascript/
  • Javascript-单击按钮后代码停止工作

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

javascript jquery html forms

Javascript-单击按钮后代码停止工作,javascript,jquery,html,forms,web-project,Javascript,Jquery,Html,Forms,Web Project,我正在尝试创建某种日历应用程序。 当您单击一个空白框时，它会显示一个创建事件的表单。 您可以使用“前”或“SIGUIENTE”导航日历。 当您单击一个框，直到您单击“前”或“SIGUIENTE”，然后它停止工作时，表单才会正确显示。 以下是完整的代码： index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-C

我正在尝试创建某种日历应用程序。
当您单击一个空白框时，它会显示一个创建事件的表单。 您可以使用“前”或“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>
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);
    });
});

//将日期添加到日期的函数
Date.prototype.addDays=函数（d）{返回新日期（this.valueOf（）+864E5*d）；}；
Date.prototype.subtractDays=函数（d）{返回新日期（this.valueOf（）-864E5*d）；}；
//设置初始变量
var longDays=[“Lunes”、“Martes”、“Miércoles”、“Jueves”、“Viernes”、“Sábado”]；
var shortDays=[“Lun”、“Mar”、“Mie”、“Jue”、“Vie”、“Sab”]；
var月数=['Ene'、'Feb'、'Mar'、'Abr'、'May'、'Jun'、'Ago'、'Sep'、'Oct'、'Nov'、'Dic']；
变量时间=['8
上午'，'9
上午'，'10
上午'，'11
上午'，'12
下午'，'1
下午'，'2
下午'，'3
下午'，'4
下午'，'5
下午']
var weekStart=新日期（）；
weekStart=weekStart.subtractDays（weekStart.getDay（）-1）；
var nav=\
>\
';
函数格式日期（日期）{
var month=date.getMonth（）；
var date=date.getDate（）；
返回日期.toString（）+'/'+月[月]；
}
功能显示日历（开始日期）{
var天数=短天数；
如果（$（窗口）.width（）>640）{
天=长天；
}
var cal=document.createElement（'div'）；
cal.setAttribute（'id'，'calendar wrapper'）；
var timeDiv=document.createElement（'div'）；
timeDiv.setAttribute（'id'，'hours'）；
timeDiv.className=“列时间”；
var corner=document.createElement（'div'）；
corner.className=“框角”；
timeDiv.appendChild（角落）；

对于（i=0；i问题是，当你点击
#prev week
或
#next week
时，你实际上调用了一些函数，这些函数删除了你现有的HTML中的
#日历包装

然后创建一个新的日历包装器，其中包含
.availabe
类的元素

jQuery
。单击称为直接绑定方法的
事件绑定方法，该方法仅适用于删除
#日历包装时文档上的exesting元素
jQuery将
视为新对象。可用的
元素，即使它们具有相同名称的类

或者，使用委派事件附加事件处理程序。例如


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


听着，我不完全理解这件事，以及为什么会发生这种情况，但这是真的

事件处理程序仅绑定到当前选定的元素；它们必须在代码调用.on（）时存在。若要确保元素存在并且可以选择，请将脚本放置在HTML标记中的元素之后，或在文档就绪处理程序中执行事件绑定。或者，使用委派事件附加事件处理程序



更新：

请从以下位置替换脚本的此部分：


    $(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);
        });
    });


致：


很抱歉，我不太明白你在说什么。我对Javascript比较陌生。在我添加showAddEvent（）函数之前，你提到的所有代码都运行得很好。你想解释一下你的答案吗？我已经更新了我的答案，我试着尽我所能解释这个问题。请参考它。

    $(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);
        });
    });