Uncaught TypeError: Невозможно прочитать свойство 'find' из неопределенного

Question

Добрый день, я использую jconfirm для своего проекта веб-сайта, но столкнулся со странной проблемой, которую не могу решить самостоятельно, см. Мой код ниже.

$.confirm({
    title: 'Add Patient',
   theme: 'material',
    backgroundDismissAnimation: 'glow',
    type:'blue',
    typeAnimated: true,
    content: '' +
    '<form action="" class="formName" style ="margin: 10px;">' +
    '<div class="form-group">' +
    '<label>ID NUMBER</label>' +
    '<input type="text" class="id_number form-control" value="my id" required />' +
    '</div>' +
    '</form>',
    buttons: {
        formSubmit: {
            text: 'Submit',
            btnClass: 'btn-blue',
            action: function () {
            }
        },
        cancel: function () {
            //close
        },
    },
    onContentReady: function () {
        this.$content.find('.id_number').change(function(){
            var a = this.$content.find('.id_number').val();
             alert(a);
        });
    }
});

Если вы попытаетесь запустить этот код, он вернет сообщение об ошибке.

Uncaught TypeError: Невозможно прочитать свойство 'find' из неопределенного

Но странная вещь, если я изменю код следующим образом.

onContentReady: function () {
                var a = this.$content.find('.id_number').val();
                 alert(a);
        }

Ошибка исчезла и всплывающее предупреждение.

Моя проблема в том, как я могу получить значение ввода внутри метода change()? помогите пожалуйста или как правильно заставить этот код работать?

onContentReady: function () {
            this.$content.find('.id_number').change(function(){
                var a = this.$content.find('.id_number').val();
                 alert(a);
            });

Answer 1

Значение this отличается внутри change() функция, чтобы проверить, что вы можете записать значение.

В качестве обходного пути, вы можете сохранить ссылку на нее и использовать ссылку.

Вы также можете использовать bind() связать ценность this к обработчику событий. Или проверьте другие другие способы, используя call() или же apply,

onContentReady: function() {
    var myReferenceToThis = this;
    this.$content.find('.id_number').change(function() {
      var a = myReferenceToThis.$content.find('.id_number').val();
      alert(a);
});

Или в вашем случае, как предложил @Phil, просто сделайте...

onContentReady: function() {
    var myReferenceToThis = this;
    this.$content.find('.id_number').change(function() {
      var a = $(this).val();
      alert(a);
 });

Answer 2

В дополнение к другому ответу, который должен быть помечен как правильный, есть три способа определения this,

1. Вызов функции (например, f()) - это относится к глобальному объекту.

2. Вызов метода (например, af()) - это относится к объекту слева от точки (иногда называется принимающим объектом).

3. Новый (конструктор) вызов - это относится к вновь выделенному объекту.

Ваш .change(...) вызов является примером второго в списке выше. Решение @sabithpocker сохраняет ссылку на this до значения this изменено