Question

我有一个对象数组，我使用标准的JavaScript for循环进行循环。我正在尝试使用jQuery为循环中的每个对象创建委托事件。每个对象都有一个eventType属性，可以是任何自定义事件，还有一个el属性，它是一个表示元素CSS选择器的字符串。使用委托事件的关键是我想将事件绑定到body或document，这样如果一个元素在DOM中不存在，它仍然会得到正确的事件处理程序下面有一些伪代码：

// Fn that does the looping (all of this in large prototype definition)
trackAll: function(callback) {
  for (var i = 0, l = this.dataSet.length; i < l; i++) {
        var current_object = this.dataSet[i];
        // Validate properties first (check for errors)
        this.propertyCheck(current_object);
        // Then run the tracking
        if (callback && typeof callback === 'function') {
            this.autoTracker(current_object, callback);
        } else {
            this.autoTracker(current_object);
        } 
    }
}

在上面，dataSet是对象数组。每个对象都有这样的足迹：

{
    trackType: 'event',
    el: '.some_class li > a',
    page: 'Homepage',
    type: 'Custom description',
    label: window.location.href,
    eventType: 'click',
    bodyClass: null,
    row: null
}

因此，这个特定的对象将特定的锚链接称为其元素，其中包含trackType的事件＆＃39;以及eventType点击＆＃39;

最终，dataSet数组中会有很多这些对象，我试图遍历并为每个对象创建事件侦听器/处理程序。这里有更多的伪代码来处理这个问题：

autoTracker: function(config, callback) {
    var self = this;
    if (config.el !== null && config.el !== 'undefined') {
        config.el = $(config.el); 
        if (config.trackType.toLowerCase() === 'event' || config.trackType.toLowerCase() === 'pageview') { 
            $(document).on(config.eventType, config.el, function(e) {
                console.log('fired!'); //=> this fires for ALL items in the array on ONE single click (or whatever eventType)
            });
            if (callback && typeof callback === 'function') {
                callback.apply(config); //=> keep reference to `config` object in callback 
            }
        }
    } 
}

因此，在dataSet函数中调用trackAll函数（调用此autoTracker函数）中的$(document).on(config.eventType, config.el, function(e) { ... });数组中的每个对象都会调用上述函数。问题是，在body的处理程序回调中运行的任何内容都会立即为数组中的每个项运行。换句话说，单击body例如会立即触发数组中每个对象的处理程序。

如何在循环中使用绑定到document或.bind()的事件正确创建委派事件，以便它不会立即触发每个事件？我觉得有一个变量范围问题，我能够使用闭包和{{1}}成功创建和绑定循环中的事件，但这只是将事件DIRECTLY绑定到元素，所以元素必须存在于功能运行。这不是我想要做的。我需要使用委托事件，这样如果元素不会立即存在于DOM中，它们仍然可以获取事件/处理程序。这里有什么想法？

Answer 1

.on（）的第二个arg应该是一个字符串，而不是一个jquery对象。

http://api.jquery.com/on/

一对评论：

更改属性的类型，例如config.el = $(config.el);会使代码难以推理。

此外，这一切似乎都很迂回。更常见的模式是在创建它们时将语义类名称放在需要事件处理程序的元素上。与<a class=clickable>一样，然后执行.on(click, '.clickable')。

如何在JavaScript for循环

1 个答案: