JavaScript函数不会被调用

javascript function does not get called

本文关键字：调用 函数 JavaScript      更新时间：2023-09-26

我第一次用揭示原型模式编写JavaScript代码。我有问题。当我在用户单击添加按钮时调用添加函数时，它会在控制台中显示此错误。

Uncaught TypeError: Cannot call method 'add' of undefined

如何解决这个问题？

这是我的脚本.js代码

$(function () {
var todo = Todo('contents');
$('.addBtn').on('click', function() {
    var name = $(this).parent().find('input[type="text"]').val();
    todo.add(name);
});
$('.contents').on('click', '.remove', function() {
    var el = $(this).parent();
    todo.remove(el);
});
$('.contents').on('click', '.update', function() {
    var dom = $(this);
    todo.addUpdateField(dom);
});
$('.contents').on('click', '.updateBtn', function() {
    var el = $(this);
    todo.update(el);
});
});

这是我的待办事项.js代码

var Todo = function(c) {
    this.contents = $('.' + c);
};
Todo.prototype = function() {
var showel = function (d) {
    this.contents.prepend(d);
},
add = function (name) {
    if(name != "") {
        var div = $('<div class="names"></div>')
        .append('<span>' + name + '</span>')
        .append("<button class='update' class='update'>Edit</button>")
        .append("<button class='remove' name='remove'>Remove</button>");
    }
    return showel(div);
},
addUpdateField = function (dom) {
    var name = dom.parent().find('span').text(),
        field = $('<input type="text" value="' + name + '" />'),
        update = $('<button class="updateBtn">Update</button>');
    dom.parent().html('').append(field).append(update);
    return;
},
update = function(el) {
    var val = el.parent().find('input').val();
    el.parent().html('<span>' + val + '</span>')
    .append('<button class="update" class="update">Edit</button>')
    .append('<button class="remove" class="remove">Remove</button>');
    return;
},
remove = function (el) {
    return el.remove();
};
return {
    add             : add,
    update          : update,
    remove          : remove,
    addUpdateField  : addUpdateField
};
}();

更新

更改后 var todo = Todo('contents');

自

var todo = new Todo('contents');

我收到此错误

Object [object Object] has no method 'add'

更新 2

这是我在JSFIDDLE上

您没有正确构造对象，因此它没有任何原型：

var todo = Todo('contents');

应该是：

var todo = new Todo('contents');

这是一个SO问题，解释了当您忘记new时会发生什么。

编辑：您定义原型函数的方式弄乱了上下文（this指向的内容）。请尝试这样的模式：

Todo.prototype = {
    method1: function () { ... },
    method2: function () { ... }
};

固定小提琴：http://jsfiddle.net/BagmY/3/

您正在尝试将Todo的prototype分配给自调用函数。但是，原型只是分配给一个函数，而不是预期的返回对象。

这是你的工作小提琴。我用你的方法将原型直接分配给一个对象。

此外，JS从上到下解析。因此，在声明Todo是什么后，定义新的Todo实例。

这是

自调用函数应该的样子：

Todo.prototype = (function() {
    // ...
    return {
        add: add,
        update: update,
        remove: remove,
        addUpdateField: addUpdateField
    };
})();​
相关文章：