lost focus when remap - Githubissues

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.

mateuszmarkowski / jQuery-Seat-Charts

lost focus when remap #77