javascript - 基本 OOP 和 jQuery - 为什么会出现 TypeError？

Question

这是我的基本代码：

JS：

jQuery(function($)
{
    function MyTest() {}

    MyTest.prototype =
    {
        myMethod: function()
        {
            $(this).append("<div id='myId'></div>");
        }
    }

    $(document).ready(function()
    {
        var myTest1 = new MyTest();

        $("#anelement").click(function()
        {
            myTest1.myMethod();
        });
    });
});

HTML：

<div id='anelement'></div>

点击“anelement”，JS控制台返回：

TypeError: e is undefined ... jquery.min.js（第 5 行）

...而且它没有附加“myId” - 为什么？

谢谢

Answer 1

您需要以某种方式将单击的元素传递给您的方法。这是一种方法：

jQuery(function ($) {
    function MyTest() {}

    MyTest.prototype = {
        myMethod: function (el) {
            $(el).append("<div id='myId'></div>");
        }
    }

    $(document).ready(function () {
        var myTest1 = new MyTest();

        $("#anelement").click(function () {
            myTest1.myMethod(this);
        });
    });
});

您还可以使用 .call 在给定的上下文中执行您的方法，但是您将无法访问实例方法和变量。

jQuery(function ($) {
    function MyTest() {}

    MyTest.prototype = {
        myMethod: function () {
            $(this).append("<div id='myId'></div>");
        }
    }

    $(document).ready(function () {
        var myTest1 = new MyTest();

        $("#anelement").click(function () {
            myTest1.myMethod.call(this);
        });
    });
});

或者干脆

jQuery(function ($) {
    function MyTest() {}

    MyTest.prototype = {
        myMethod: function () {
            $(this).append("<div id='myId'></div>");
        }
    }

    $(document).ready(function () {
        var myTest1 = new MyTest();

        $("#anelement").click(myTest1.myMethod);
    });
});