下拉更改事件错误中的 Javascript 函数调用

Question

var TourItinerary = {  
    EXCURSIONS:{

    },
    init:function(){
        console.log('Initializing...');
        this.initializeElements();
    },       
    initializeElements:function(){
        console.log('init elements...');
        $("select[id^='start_city_']").change(function(){
            var day_id = $(this).attr('id').replace("start_city_","");
            getPossibleExcursions(day_id);
        });
    },    
    getPossibleExcursions: function(day_id){
        console.log('Day Id ='+day_id);
    }
};

如何在下拉更改事件中调用 getPossibleExcursions(day_id) 函数？

它总是显示:

Uncaught ReferenceError: getPossibleExcursions is not defined.

Answer 1

您必须将this 分配给一些变量以供将来引用。当您定义更改事件时，this 指的是您要添加事件的 DOM 对象，而不是实际对象。所以将 this 分配给一些变量，比如 self 并在 on change 函数中重用它。

现在您可以使用 self 来引用对象，也可以使用 this 来引用 DOM 对象

var TourItinerary = {  
    EXCURSIONS:{

    },
    init:function(){
        console.log('Initializing...');
        this.initializeElements();
    },       
    initializeElements:function(){
        console.log('init elements...');
        var self = this;
        $("select[id^='start_city_']").change(function(){
            var day_id = $(this).attr('id').replace("start_city_","");
            self.getPossibleExcursions(day_id);
            console.log("value = " + $(this).val());
        });
    },
    getPossibleExcursions: function(day_id){
        console.log('Day Id ='+day_id);
    }
};

$(document).ready(function(){
    TourItinerary.init();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="start_city_123">
   <option value="a">a</option>
   <option value="b">b</option>
   <option value="c">c</option>
   <option value="d">d</option>
   <option value="e">e</option>
</select>