lost focus when remap #77
Description
I used focus function to get row and label, and then i changed map with smaller rows and columns. if the last focus coordinate exceed new map, the focus funtion couldn't work here. I found the program couldn't pass the "jquery-3.3.1.js"'s code below.
if ( !( eventHandle = elemData.handle ) ) {
eventHandle = elemData.handle = function( e ) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== "undefined" && jQuery.event.triggered !== e.type ?
jQuery.event.dispatch.apply( elem, arguments ) : undefined;
};
here's my code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>booking</title>
<meta charset="utf-8" />
<script src="jquery-3.3.1.js"></script>
<script src="jquery.seat-charts.js"></script>
<style>
div.seatCharts-container {
float: left; }
div.seatCharts-cell {
color: #182C4E;
height: 30px;
width: 30px;
line-height: 30px;
margin: 5px;
float: left;
text-align: center;
outline: solid;
font-size: 16px; }
div.seatCharts-seat {
color: #fff;
cursor: pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
div.seatCharts-seat.available {
background-color: #B9DEA0;}
div.seatCharts-seat.focused {
background-color: #76B474;
border: none; }
div.seatCharts-seat.selected {
background-color: #E6CAC4; }
div.seatCharts-seat.unavailable {
background-color: #472B34;
cursor: not-allowed; }
#legend {
float: left; }
.seatCharts-legendList {
padding-left: 0px;
list-style: none;}
.seatCharts-legendItem {
float: left;
width: 100px; }
span.seatCharts-legendDescription {
margin-left: 5px;
line-height: 30px; }
</style>
<script>
var existdata = new Array('1_2', '4_4', '4_5', '6_6', '6_7', '8_5');
var maparray, sc, seatsn;
function map_creat(){
$('.seatCharts-legendItem').remove();
$('.seatCharts-row').remove();
$('#lightmap,#lightmap *').unbind().removeData();
var level_num = $('#level_num').val();
var seat_num = $('#seat_num').val();
maparray = new Array(level_num);
for(var i=0;i<level_num;i++) {
maparray[i] = '';
for (var j = 0; j < seat_num; j++) {
maparray[i] = maparray[i] + 'a'; } }
sc = $('#lightmap').seatCharts({
map: maparray,
legend: {
node: $('#legend'),
items: [['a', 'unavailable', 'unavailable'], ['a', 'selected', 'selected'], ] },
focus: function () {
if (this.status() == 'available'){
var row = (this.settings.row + 1).toString();
if (row.length < 2){
row = '0' + row;
}
var seat = this.settings.label.toString();
if (seat.length < 2) {
seat = '0' + seat;
}
seatsn = row + seat;
$('#selectedmsg').text(seatsn);
$('#focusmsg').text(seatsn);
return 'focused';
}
else if (this.status() == 'unavailable'){
return this.status();
}
else if (this.status() == 'selected'){
var row = (this.settings.row + 1).toString();
if (row.length < 2) {
row = '0' + row;
}
var seat = this.settings.label.toString();
if (seat.length < 2) {
seat = '0' + seat;
}
seatsn = row + seat;
$('#selectedmsg').text(seatsn);
return this.status();
} },
blur: function () {
return this.status();
},
click: function (){
if (this.status() == 'available') {
return 'selected';
}
else if (this.status() == 'unavailable'){
return 'unavailable';
}
else if (this.status() == 'selected') {
return 'available';
}}, });
var lightmap_width = (seat_num * 40) + 40;
var lightmap_height = (level_num * 40) + 40;
$('#lightmap').css('width', lightmap_width);
$('#lightmap').css('height', lightmap_height);
if (lightmap_width <= 400) {
$('#include_lightmap').css('width', lightmap_width);
$('#include_lightmap').css('height', lightmap_height);
$('#include_lightmap').css('overflow', 'visible');
}
else {
$('#include_lightmap').css('width', 400);
$('#include_lightmap').css('height', 400);
$('#include_lightmap').css('overflow', 'auto');
}
sc.get(existdata).status('unavailable');
sc.get('1_1').status('selected');
}
</script>
</head>
<body>
<p>booking</p>
<p>level: <input id="level_num" name="level_num" type="text" /></p>
<p>seat: <input id="seat_num" name="seat_num" type="text" /></p>
<p>
<input id="createtable" name="createtable" type="button" onclick="map_creat()" value="create" />
</p>
<p id="selectedmsg" style="border:solid">999</p>
<p id="focusmsg" style="border:solid">1</p>
<div id="legend" style="border:solid;display:block;overflow:visible"></div>
<br /><br /><br /><br /><br />
<div id="include_lightmap" style="overflow:auto;border:solid;border-color:antiquewhite;max-width:400px;max-height:400px">
<div id="lightmap" style=""></div>
</div>
</body>
</html>
please help me.