Javascript 事件侦听器未绑定

我希望有人能告诉我为什么调用TestProtObj.init不能像预期的那样工作——侦听器根本不能工作

$(document).ready(function () {
    //set TestProtObj properties in the constructor
    var TestProtObj = function (string, target, button) {
        this.testValue = string;
        this.target = $(target);
        this.button = $(button);
    }

    //add methods to the object prototype
    TestProtObj.prototype = {

        init: function () {
            this.button.on('click', function (e) {
                e.preventDefault;
                this.returnTest();
            });
        },

        returnTest: function () {
            this.target.append(this.testValue);
        }
    }

    //initialize client code
    var testString = 'It worked!',
        targetDiv = '#target',
        button = 'button.text-button';
    //call the returnTest() method and pass in params above
    var TestConcObj = new TestProtObj(testString, targetDiv, button);
    TestConcObj.init();
});

奇怪的是，以下代码可以工作：

$(document).ready(function () {
    var bindListener = function () {
        $('.test').on('click', function (e) {
            e.preventDefault;
            $('.target').append('It works!');
        })
    }

    bindListener();
})

似乎将函数放入对象文本是出于某种原因，导致它失败。Chrome调试工具栏中没有抛出错误

非常感谢你的帮助

JSFiddles：

---

只需在此函数内创建一个私有变量，该变量使用关键字

this

引用init函数内的

TestProtObj

。您可以在函数的整个范围内重用此变量（

self

）

    init: function () {
        var self = this;
        this.button.on('click', function (e) {
            e.preventDefault(); //add () here.
            self.returnTest();
        });

因为JavaScript使用它，所以它可以工作

---

当您在事件处理程序

this.button.on（'click'）中引用此按钮时，…

实际上您引用的是按钮而不是对象。

您的类没有正确编码。请尝试以下操作：

var TestProtObj = function TestProtObj(string, target, button) {
    return this.prototype.init.call(string, target, button, this);
}

TestPrtoObj.prototype.testValue = null;
TestPrtoObj.prototype.target    = null;
TestPrtoObj.prototype.button    = null;

TestProtObj.prototype.init = function init(string, target, button) {
    vat self = this;

    this.testValue = string;
    this.target    = $(target);
    this.button    = $(button);

    this.button.on('click', function (e) {
        e.preventDefault;
        self.returnTest();
    });

    return this;
}

TestProtObj.prototype.returnTest = function returnTest() {
    this.target.append(this.testValue);
}


//initialize client code
var testString = 'It worked!',
    targetDiv = '#target',
    button    = 'button.text-button';

//call the returnTest() method and pass in params above
var instance = new TestProtObj(testString, targetDiv, button);

当您创建一个新实例时，会自动调用init方法。现在按钮应该响应click事件

查看本精彩教程以获取更多信息：

我建议命名函数，这将有助于调试，如果引发异常，您将在堆栈跟踪中看到函数名，而不仅仅是[function]或[function anonymous]

---

希望这能有所帮助。

我已经找到了答案。我一直在尝试.live（），直到我愚蠢地意识到它已被弃用。任何尝试我尝试的方法的人都应该使用jQuery中的技术，并附带以下代码片段：

 AjaxProt.prototype = {

        init: function () {
            var thisObj = this;
            $(document).on(thisObj.event, thisObj.targetEl, function(e) {
                e.preventDefault();
                thisObj.ajaxCall();
            });
        },

这将防止jQuery尝试将侦听器绑定到不存在的元素（动态加载的元素）上，直到它实际存在为止—非常巧妙地利用

$（document）

全局对象

我希望这可以节省一些人半天的调试时间，就像我刚才愚蠢地尝试做的那样。干杯

---

编辑：感谢Mouser和所有其他试图帮助我克服自己愚蠢的人。

谢谢你的帮助。我如何在不调用此函数的情况下将值从构造函数传递到我的方法？谢谢！这很有效。如果我有多个方法，我是否需要将

此
分配给
self
，然后在pla中调用
self
当
this
的引用发生变化时，您需要创建另一个对它的引用，或者使用
bind/apply/call
将它传递给新函数。我不得不再次打扰您-我在实际的类上测试了这一点，e.preventDefault不起作用。检查调试器
这个
被定义为文档-我认为，在原型方法的范围内，应该是原型对象…@user3497023只需将href替换为
href=javascript:void（0）
这仍然会使它成为一个链接，实际上它不会执行任何操作。好吧，我回来再次让你烦恼。1.我不能作废href，因为我需要它来进行AJAX调用。2.我想我知道问题是什么-我的完整脚本中的这个.button在加载之前调用了一个不存在的元素-因为该元素包含在html r中通过
$.ajax
从服务中返回。现在问题是在
此.button
实际添加到dom树之前阻止调用.on（）。有什么想法吗？：D