Uncaught TypeError: this.on is not a function

114

14 октября 2019, 14:30

Я использую вот этот скрипт

(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      }
    });
  };
}(jQuery));

для того, чтобы разрешить ввод только цифр в ячейки таблицы (с атрибутом contenteditable="true"), но получаю вот такую ошибку "Uncaught TypeError: this.on is not a function" на третьей строке return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() { Эта ошибка появляется после того как я добавляю вот этот кусок кода

 $("#single-total").inputFilter(function(value) {
  return /^-?\d*$/.test(value); });

Как это исправить?

(Подключенные библиотеки http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js и jquery-3.3.1.js)

Вот мой код

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Наличная оплата</title>
    <script src="JS/jquery-3.3.1.js" type="text/javascript" charset="utf-8" async defer></script>
    <link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
    <div class="navigation-menu">
        <br>
        <div class="form-input">
            <form action="usd.php" method="get" accept-charset="utf-8">
                <p align="center"><strong>ЧП "GRAND SUPERIOR"</strong></p>
                <p align="center">
                    Квитанция № 
                </p>
                <p align="center" id="timedisplay">Дата</script> </p>
                <table class="input-table" onchange="getTotal();">
                    <thead>
                        <tr>
                            <th>Наименование (Услуг работ)</th>
                            <th>Количество суток</th>
                            <th>Количество</th>
                            <th>Цена с НДС</th>
                            <th>Сумма с НДС</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td id="str0-c0"></td>
                            <td id="str0-c1"></td>
                            <td id="str0-c2"></td>
                            <td id="str0-c3"></td>
                            <td id="str0-c3"></td>
                        </tr>
                        <tr onchange="getTotal()">
                            <td>Одноместный (Single)</td>
                            <td contenteditable="true" id="single-day"></td>
                            <td contenteditable="true" id="single-amount"></td>
                            <td contenteditable="true" id="single-sum"></td>
                            <td contenteditable="true" id="single-total"></td>
                        </tr>
                        <tr>
                            <td>Двухместный (TWN/DBL)</td>
                            <td contenteditable="true" id="twn-day"></td>
                            <td contenteditable="true" id="twn-amount"></td>
                            <td contenteditable="true" id="twn-sum"></td>
                            <td contenteditable="true" id="twn-total"></td>
                        </tr>
                        <tr>
                            <td>Двухместный с одноместным размещением (DSU)</td>
                            <td contenteditable="true" id="dsu-day"></td>
                            <td contenteditable="true" id="dsu-amount"></td>
                            <td contenteditable="true" id="dsu-sum"></td>
                            <td contenteditable="true" id="dsu-total"></td>
                        </tr>
                        <tr>
                            <td>Трехместный (TRPL)</td>
                            <td contenteditable="true" id="trpl-day"></td>
                            <td contenteditable="true" id="trpl-amount"></td>
                            <td contenteditable="true" id="trpl-sum"></td>
                            <td contenteditable="true" id="trpl-total"></td>
                        </tr>
                        <tr>
                            <td>Люкс (Deluxe)</td>
                            <td contenteditable="true" id="deluxe-day"></td>
                            <td contenteditable="true" id="deluxe-amount"></td>
                            <td contenteditable="true" id="deluxe-sum"></td>
                            <td contenteditable="true" id="deluxe-total"></td>
                        </tr>
                        <tr>
                            <td>Супер люкс (Executive suite)</td>
                            <td contenteditable="true" id="es-day"></td>
                            <td contenteditable="true" id="es-amount"></td>
                            <td contenteditable="true" id="es-sum"></td>
                            <td contenteditable="true" id="es-total"></td>
                        </tr>
                        <tr>
                            <td>Total Services</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td contenteditable="true" id="total-serv"></td>
                        </tr>
                        <tr>
                            <td><em>В том числе НДС 20</em></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td contenteditable="true" id="nds"></td>
                        </tr>
                        <tr>
                            <td>Тур. сбор (1 сутки - 30409сум.50тн)</td>
                            <td contenteditable="true" id="tur-day-day"></td>
                            <td contenteditable="true" id="tur-day-amount"></td>
                            <td contenteditable="true" id="tur-day-sum"></td>
                            <td contenteditable="true" id="tur-day-total"></td>
                        </tr>
                        <tr>
                            <td><strong>Total</strong></td>
                            <td contenteditable="true" colspan="4" id=total></td>
                        </tr>
                        <tr>                            
                            <td><strong><em>Paid by Cash</em></strong></td>
                            <td contenteditable="true" colspan="4" id="paid-by-cash"></td>
                        </tr>
                    </tbody>
                </table>
                <br>
                <input type="button" name="Entered" id="submit" value="Сохранить" onclick="getContents()">
                <br>
                <br>
            </form>         
        </div>
    </div>
</body>
<script>    
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      }
    });
  };
}(jQuery));

$("#single-total").inputFilter(function(value) {
  return /^-?\d*$/.test(value); });
function getDate(){
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    var year = date.getFullYear();
    var month = date.getMonth();
    var day = date.getDay();
    if(seconds < 10)
    {
        seconds = '0' + seconds;
    }
    if(minutes < 10)
    {
        minutes = '0' + minutes;
    }
    if(hours < 10)
    {
        hours = '0' + hours;
    }
    if(day < 10)
    {
        day = '0' + day;
    }
    if(month < 10)
    {
        month = '0' + month;
    }
    document.getElementById('timedisplay').innerHTML = day + '.' + month + '.' + year + ' ' + hours + ':' + minutes + ':' + seconds;
}
setInterval(getDate, 1000);
</script>
</body>
</html>

Answer 1

В данном случае ошибка происходит из-за того, что выполнение скрипта использующего jQuery начинается раньше момента, когда сама библиотека загрузится.

Это происходит из-за наличия атрибутов async и defer. Однако нет смысла их одновременной подстановки, так как в этом случае все будет работать так же как если бы был только async атрибут.

Для решения достаточно просто перенести это тег перед тегом script с кодом и удалить ненужные атрибуты async и defer.

<script src="JS/jquery-3.3.1.js" type="text/javascript" charset="utf-8" ></script>
<script>    
(function($) {
  $.fn.inputFilter = function(inputFilter) {
  ...