Jquery. Call a function when clicking on a link

Question

Given: There is a JS function that calls the list of cities. Included in the header as a js file

GeoIPModule.prototype.loadCities = function(callback) {
        var self = this;
        if (!this.citiesLoaded) {
            $.ajax({
                url:      self.http_host + 'index.php?route=extension/module/geoip/getList',
                dataType: 'html',
                success:  function(html) {
                    self.chooseBlock.html(html);
                    var input = self.chooseBlock.find('.geoip-popup-input');
                    self.autocomplete(input, self.chooseBlock.find('.geoip-body'));
                    input.siblings('ul.dropdown-menu').css({'maxHeight': 300, 'overflowY': 'auto', 'overflowX': 'hidden'});
                    input.focus();
                    self.citiesLoaded = true;
                    callback.apply();
                }
            });
        }
    };

Task: It is necessary to call the function, i.e. call up a list of cities by clicking on the link in any part of the document

Trying to do this:

<a href="javascript:void(0);" id="load-сities">ССЫЛКА</a>

<script type="text/javascript">
  $("#load-сities").click(function(e) {
    GeoIPModule.prototype.loadCities();
  });
</script>

But I get the error: ReferenceError: GeoIPModule is not defined

Complete script https://jsfiddle.net/3L604e7m

Answer 1

If you want GeoIPModule to be globally available, you can set the property on the window. Currently, it is only visible inside the immediately-invoked function expression.

window.GeoIPModule = function(o, el){
  //...
}

JSFiddle