Использовать функцию keyup в пользовательском классе jQuery

Question

У меня есть собственный класс jQuery для создания всплывающего списка, но когда я передаю HTML-элементы объектам класса, это undefined!

Я хочу отправить элемент в класс и установить для него событие .keyup() и манипулировать значением элемента в функции .keyup().

Мой код:

$.Class('kpopup', { 
    // static 
    init: function (e, p, h, r, u) { 
     url = u; 
     hostElement = e; 
     popupElement = p; 
     popupResult = r; 
     hiddenElement = h; 

     $(hostElement).keyup(function() { 
      $.ajax({ 
       url: url, 
       data: { "value": $(hostElement).val() }, 
       type: 'POST', 
       success: function (dt) { 
        if (dt != "") { 
         $(popupResult).html(dt); 
         $(hostElement).popupDiv($(popupElement)); 
        } else { 
         $(popupElement).hide(); 
        } 
       } 
      }); 
     }); 
    } 
}, 
//Prototypes 
{}); 

код для использования выше класса:

$(document).ready(function() { 
    var kpopup = new kpopup(
     $("#clas_academy_id"), 
     $(".popup-picker"), 
     $("#clas_academy_id_hidden"), 
     $("#popup-result"), 
     '@Url.Action("searchAcademies","Academy")' 
    ); 
}); 

Answer 1

Может быть, вы можете попробовать это, нажмите клавишу F12 в хроме или Ctrl + Shift + к в Firefox, чтобы открыть консоль и проверить выход. Вы можете щелкнуть на некоторых выходах console.log, чтобы проверить значения регистрируемых объектов.

Kpopup = function(e, p, h, r, u) { 
    console.log("creating Kpopup with parameters:", e, p, h, r, u); 
    this.url = u; 
    this.hostElement = e; 
    this.popupElement = p; 
    tis.popupResult = r; 
    this.hiddenElement = h; 
    this.init(); 
}; 
Kpopup.prototype.init = function() { 
    console.log("And this is:", this); 
    console.log("And this hostElement is:", this.hostElement); 
    var pResult = this.popupResult; 
    var hElement = this.hostElement; 
    var pElement = this.popupElement; 
    this.hostElement.keyup(function() { 
    $.ajax({ 
     url: this.url, 
     data: {"value": hElement.val()}, 
     type: 'POST', 
     success: function(dt) { 
     if (dt !== "") { 
      pResult.html(dt); 
      hElement.popupDiv(pElement); 
     } else { 
      pElement.hide(); 
     } 
     } 
    }); 
    }); 
}; 

Обратите внимание, что я Капитализированное ваш объект Kpopup, потому что это обычное обозначение для функций конструктора, чтобы ваш документ готовы вы должны капитализировать его, а также:

$(document).ready(function() { 
    var kpopup = new Kpopup(
     $("#clas_academy_id"), 
     $(".popup-picker"), 
     $("#clas_academy_id_hidden"), 
     $("#popup-result"), 
     '@Url.Action("searchAcademies","Academy")' 
    ); 
});