我正在尝试创建某种日历应用程序。
当您单击空白框时，它会显示一个用于创建事件的表单。
您使用“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);
});
});
最佳答案
事情是当你点击#prev-week或者 #next-week您实际上调用了删除现有 HTML 部分的函数，即 #calender-wrapper
然后创建一个包含 .availabe 元素的新日历包装器类。
jQuery .click事件绑定(bind)方法称为直接绑定(bind)方法，当您删除 #calender-wrapper 时，它仅适用于文档中现有的元素。 jQuery 认为 .availabe元素作为新对象，即使它们具有相同名称的相同类。
或者，使用委托(delegate)事件来附加事件处理程序。喜欢...
$( document ).on( "event-name", ".dynamic-element-selector", function() {
##code;
});
看来我并没有完全理解这件事，为什么会这样，但这是真的。
Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on(). To ensure the elements are present and can be selected, place scripts after the elements in the HTML markup or perform event binding inside a document ready handler. Alternatively, use delegated events to attach event handlers.
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);
});
});
关于Javascript - 单击按钮后代码停止工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38857875/