Question

我有一个对象，它有多个函数在页面加载时注册到事件。这似乎工作正常。但是，一旦事件发生，我遇到了获取对象范围的问题。 this似乎只会引入事件触发的元素。我想知道是否有人可以帮忙告诉我哪里出错了？

编辑1

我觉得代码片段非常简洁。但是，我可以看到我的问题可能被视为懒惰。

我有一个对象，其中有多个函数触发了在加载时动态连接的事件，可以在这里看到：

var collection = function() {
    var _c = {};
    _c.el = '#container',
    _c.buildItems = function(){
        var $el = $('#content2');
        var template = Handlebars.compile($("#tpl-collection-item-row").html());
        var data = [
            {id: 1, val: 'test 1', text: 'this is a test... 1'},
            {id: 2, val: 'test 2', text: 'this is a test... 2'},
            {id: 3, val: 'test 3', text: 'this is a test... 3'},
        ];

        $el.append(template(data));
    },
    _c.clickStuff = function() {
        alert("hey!");
    },
    _c.moreClicking = function() {
        alert("i knew this would work");
    },
    _c.events = [
        {target: '.row', event: 'click', func: 'clickStuff'},
        {target: '#gettingIt', event: 'click', func: 'moreClicking'}
    ],
    _c.initialize = function() {
        var _this = this;
        $.each(this.events, function(){
            var func = _this[this.func]
            $(_this.el).on(this.event, this.target, func);
        });
    },
    _c.render = function() {
        this.initialize();
        this.buildItems();
    }
    return _c;
}

_c.buildItems是一个被调用以从_c.render()触发我的手柄模板的函数。在此之前，我正在调用一个函数来连接我的_c.events数组中列出的事件，该事件采用target对象和event类型发生并映射到func我的对象中的名字。这发生在我的_c.initialize函数中。

事件似乎完美无缺。但是，我不确定如何在触发时从_c.clickStuff等函数中获取collection函数的范围。我不确定如何做到这一点如果有人可以向我解释我哪里出错了会很棒吗？

这是我的代码的小提琴： https://jsfiddle.net/0s8vb8m3/3/

Answer 1

您可以在代码中引用_c，因为它位于＆＃34;集合＆＃34;的范围内。功能

＆＃13;

	var collection = function() {
	    var _c = {
	        el: '#container'
	    };

	    _c.buildItems = function() {
	        var $el = $('#content2');
	        var template = Handlebars.compile($("#tpl-collection-item-row").html());
	        var data = [{
	            id: 1,
	            val: 'test 1',
	            text: 'this is a test... 1'
	        }, {
	            id: 2,
	            val: 'test 2',
	            text: 'this is a test... 2'
	        }, {
	            id: 3,
	            val: 'test 3',
	            text: 'this is a test... 3'
	        }];

	        $el.append(template(data));
	    };

	    _c.clickStuff = function() {
	        console.log(_c.el);
	    };

	    _c.moreClicking = function() {
	        alert("i knew this would work");
	    };

	    _c.events = [{
	        target: '.row',
	        event: 'click',
	        func: 'clickStuff'
	    }, {
	        target: '#gettingIt',
	        event: 'click',
	        func: 'moreClicking'
	    }];

	    _c.initialize = function() {
	        $.each(_c.events, function(index, event) {
	            var func = _c[event.func];
	            $(_c.el).on(event.event, event.target, func);
	        });
	    };

	    _c.render = function() {
	        _c.initialize();
	        _c.buildItems();
	    };

	    return _c;
	}

	var c = collection();

	c.initialize();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div class="row">Blah1</div>
    <div class="row">Blah2</div>
    <div class="row">Blah3</div>
</div>

＆＃13;

jQuery在事件处理程序上丢失了父对象的范围

1 个答案: