对象属性在事件处理程序中未定义

Object property is undefined inside event handler

本文关键字：未定义 程序 事件处理 属性 对象      更新时间：2023-09-26

出于某种原因，当我调用generateTabs时，我得到this.divRow1是未定义的。但是，当我实例化标准时，它不是未定义的。

我做错了什么？

function Criteria() {
    this.divPortfolio = $("#portfolio_div");
    this.divImport = $("#lstimprt_div");
    this.rolling = $('#rolling');
    this.datePickers = $("#datepickers");
    this.dateStart = $("#datepicker");
    this.dateEnd = $("#datepicker2");
    this.btnToggle = $("#toggle");
    this.btnRun = $("#run_report");
    this.divRow1 = $("#Row1");
    this.dateChoice = $("#datechoice");
    this.minDate = $(".minDate");
}
Criteria.prototype.generateToggle = function () {
        /** Toggle button toggle elements chosen open/closed **/
        button.click(function () {
            this.divRow1.toggle("slow");
            this.divImport.toggle("slow");
            $("#mindate_div").toggle("slow");
            $("#header_row").toggle("slow");
            return false; //Stops postback
        });
    };
    /** When page loads  **/
    $(document).ready(function () {
        var controls = new Criteria();
        var mindate = controls.minDate.html();
        controls.onloadHide();
        controls.generatePicker(controls.dateStart);
        controls.generatePicker(controls.dateEnd);
        controls.generateToggle(controls.btnToggle);
    });
是因为回

调方法的执行上下文不是Criteria对象，而是点击的按钮。

一种解决方案是使用 $.proxy(( 传递自定义执行上下文

button.click($.proxy(function () {
    this.divRow1.toggle("slow");
    this.divImport.toggle("slow");
    $("#mindate_div").toggle("slow");
    $("#header_row").toggle("slow");
    return false; //Stops postback
}, this));

另一种解决方案是使用闭包变量

var that = this;
button.click(function () {
    that.divRow1.toggle("slow");
    that.divImport.toggle("slow");
    $("#mindate_div").toggle("slow");
    $("#header_row").toggle("slow");
    return false; //Stops postback
});

button.click(function () {
        this.divRow1.toggle("slow");
        this.divImport.toggle("slow");
        $("#mindate_div").toggle("slow");
        $("#header_row").toggle("slow");
        return false; //Stops postback
    });

this 在点击事件中的范围与其外部的范围不同。 具体来说，jQuery会将其绑定到触发事件的项(在本例中为按钮(。 如果此时设置断点并在开发控制台中检查this，你将看到它引用了 DOM 元素。

您可以通过设置这样的 self 变量并引用它来解决此问题。

Criteria.prototype.generateToggle = function () {
    var self = this;
    /** Toggle button toggle elements chosen open/closed **/
    button.click(function () {
        self.divRow1.toggle("slow");
        self.divImport.toggle("slow");
        $("#mindate_div").toggle("slow");
        $("#header_row").toggle("slow");
        return false; //Stops postback
    });
};

Criteria.prototype.generateToggle = function () {
        var that = this; 
        /** Toggle button toggle elements chosen open/closed **/
        button.click(function () {
            that.divRow1.toggle("slow");
            that.divImport.toggle("slow");
            $("#mindate_div").toggle("slow");
            $("#header_row").toggle("slow");
            return false; //Stops postback
        });
    };

"this"上下文在按钮单击中已更改。尝试上述操作

相关文章：