FullCalendar事件弹出按钮单击“不工作”
FullCalendar事件弹出按钮单击“不工作”
提问于 2017-12-17 17:39:22
我使用FullCalendar来显示事件。单击事件时，会显示一个弹出窗口，并显示事件的信息和打开页面以查看更多详细信息的按钮。我已经设置了详细信息和按钮，但完整日历事件号所需的id始终是日历上的最后一个，而不是单击事件中的id。
我需要单击事件，打开弹出窗口，然后单击视图按钮打开新页面，单击事件的id。
$('.fullcalendar-event').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: today,
editable: false,
eventOverlap: false,
displayEventTime: false,
eventSources: {
type: "POST",
url: 'php_files/calender_php_files/populate_calender.php',
data: {
client_id: sessionStorage.getItem('client_id'),
access_id: sessionStorage.getItem('access_id')
}
},
eventRender: function (event, element) {
var event_popover = element.popover({
title: function () {
return "<B>" + event.event_title + "</B>";
},
placement: 'auto',
html: true,
trigger: 'click',
animation: 'false',
content: function () {
if (event.event_type === 'embargo') {
return "<div>" +
"<b>Site: </b>" + event.event_site +
"<br />" +
"<b>Start: </b>" + moment(event.event_start_date).format('DD/MM/YYYY') + ", " +
moment(event.event_start_time, 'HHmmss').format('HH:mm') +
"<br />" +
"<b>End: </b>" + moment(event.event_end_date).format('DD/MM/YYYY') + ", " +
moment(event.event_end_time, 'HHmmss').format('HH:mm') +
"<br />" +
"<br />" +
"<button id='view' class='btn btn-primary btn-xs view'>View</button>" +
"</div>"
} else if (event.event_type === 'permit') {
return "<div>" +
"<b>Site: </b>" + event.event_site +
"<br />" +
"<b>Start: </b>" + moment(event.event_start_date).format('DD/MM/YYYY') + ", " +
moment(event.event_start_time, 'HHmmss').format('HH:mm') +
"<br />" +
"<b>End: </b>" + moment(event.event_end_date).format('DD/MM/YYYY') + ", " +
moment(event.event_end_time, 'HHmmss').format('HH:mm') +
"<br />" +
"<br />" +
"<button class='btn btn-primary btn-xs view'>View</button>" +
"<button style='margin-left: 8px;' class='btn btn-warning btn-xs clear'>Clear</button>" +
"<button style='margin-left: 8px;' class='btn btn-danger btn-xs cancel'>Cancel</button>" +
"</div>"
}
},
container: 'body'
}).popover('show');
$('body').on('click', function (e) {
if (!element.is(e.target) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0)
element.popover('hide');
});
$(document).on("click", ".view", function() {
window.location.replace('edit_site_embargo.php?embargo_id=' + event.event_number)
})
}
});回答 1
Stack Overflow用户
发布于 2017-12-17 20:24:18
对于每个日历事件，您的块$(document).on("click", ".view", function() {只执行一次。因此，如果您有20个日历事件，则在"view“类上得到20个”单击“事件处理程序。但是，这种结构意味着所有的“视图”按钮都将触发所有20个单击处理程序，因为它们都绑定到同一件事情上。因此，当您单击其中一个按钮时，window.location.replace命令运行了20次，但运行速度如此之快，实际上只执行了该命令的最后一个副本，这将是引用最后一个日历事件的副本。这解释了你目前所看到的行为。
你需要做的是：
1)将单击事件处理程序代码移到eventRender函数之外，使其只运行一次，并创建一个处理程序。这很好，因为您已经使用了委托事件处理，所以它仍然会绑定到创建的所有按钮。
2)在按钮上定义一个数据属性，您可以在单击按钮的地方检索该属性，该属性包含要使用的事件ID。
因此，将这个块完全移出日历设置代码，并稍微重新定义它：
$(document).on("click", ".view", function() {
window.location.replace('edit_site_embargo.php?embargo_id=' + $(this).data("event-number")); //get the event number from the button's data-attribute
})并更改popover创建代码，以便它使用包含事件号的额外属性定义"view“按钮：
"<button class='btn btn-primary btn-xs view' data-event-number='" + event.event_number + "'>View</button>" +(顺便说一句，我建议您从按钮的“禁运”版本中删除“id=”视图，因为这可以创建具有相同ID的多个元素，这是无效的。)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47857791
复制相关文章
相似问题
腾讯云开发者
