如何从jQuery内部调用JavaScript函数？

Question

I am trying to clean up some code and separate it into different functions. Something is not working and I think it has to do with scope. I am trying to execute loadSubscriberList() from inside a jQuery change event listener.

showUserList: function (res) {
    $('#cvUser').append('<option value="">  - Select a user - </option ');
    $.each(res.UserList, function (key, value) {
        $('#cvUser').append('<option value="' + value.id + '">' + value.firstName + " " + value.lastName + " " + value.userid + '</option>');
    });

    $('#cvUser').on('keyup change', function () {
        if ($('#cvUser').val()) {
            $('#subscriberSelectView').html('');
            var showSubscribers = $($("#subscriberSelect").text());
            $("#subscriberSelectView").append(showSubscribers);
            this.loadSubscriberList();
        } else {
            $('#subscriberSelectView').html('');
        }
    });
},

loadSubscriberList: function () {
    var postData = {
        'usr': $('#cvUser').val()
    }

    appNS.tpmBase.ajaxReq(
        '',
        postData,
        '/rsc/cvr/gsl',
        null,
        null,
        $.proxy(this.handleShowUserList, this)
    )
},

Uncaught TypeError: this.loadSubscriberList is not a function

Answer 1

Can you try this,

$('#cvUser').on('keyup change', function () {
  if($('#cvUser').val()){
    $('#subscriberSelectView').html('');
    var showSubscribers = $($("#subscriberSelect").text());
    $("#subscriberSelectView").append( showSubscribers );
     loadSubscriberList($('#cvUser').val());
  }
  else {
    $('#subscriberSelectView').html('');
  }
});
} ,

loadSubscriberList: function(cvUserVal) {
  var postData = {
   'usr': cvUserVal
  }

changed this.loadSubscriberList() to loadSubscriberList($('#cvUser').val()); and added cvUserVal as a parameter to loadSubscriberList() function.

Answer 2

In javascript, the meaning of this is dynamic.

In the inner function, your keyup/change handler, this is the #cvUser element.

A workaround is to keep a reference to the outer this . By custom we use that .

showUserList: function(res) {
    var that = this;
    ...
    $('#cvUser').on('keyup change', function() {
        ...
        that.loadSubscriberList();
        ...
    });
},