Basic 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 (line 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);
    });
});