同一容器上的事件委托问题

Question

我有一个函数，简化如下：

var fooFunction = function($container, data) {
  $container.data('foobarData', data);

  $container.on('click', 'a', function(e) {
    var data = $(e.delegateTarget).data('foobarData');
    var $target = $(e.currentTarget);

    if (typeof data.validateFunction === 'function' && !data.validateFunction(e)) {
      return;
    }

    e.preventDefault();
    e.stopPropagation();

    // Do stuff
    console.log(data.returnText);
  });
};

fooFunction('.same-container', {
  validateFunction: function(event) {
    return $(e.currentTarget).closest('.type-companies').length ? true : false;
  },
  returnText: 'Hello Company!',
});

fooFunction('.same-container', {
  validateFunction: function(event) {
    return $(e.currentTarget).closest('.type-humans').length ? true : false;
  },
  returnText: 'Hello Human!',
})

我在同一个容器 (.same-container) 上使用事件委托和自定义 validateFunction() 来验证 // Do stuff 中的代码是否应该运行。

对于每个fooFunction() 启动，我都有一些不同的逻辑将在// Do stuff 上调用。问题是这两个事件委托发生冲突。似乎只调用了其中一个并覆盖了另一个。

我怎样才能拥有多个事件委托，并可以选择通过自定义 validateFunction 来定义应该调用哪一个。我使用preventDefault() + stopPropagation()，所以点击<a>，只要validateFunction()返回true，什么都不会发生。

Answer 1

问题是你每次都覆盖$(e.delegateTarget).data('foobarData')。

相反，您可以将选项添加到数组中，然后循环直到找到匹配项。

var fooFunction = function($container, data) {
  var oldData = $container.data('foobarData', data);
  if (oldData) { // Already delegated, add the new data
    oldData.push(data);
    $container.data('foobarData', oldData);
  } else { // First time, create initial data and delegate handler
    $container.data('foobarData', [data]);
    $container.on('click', 'a', function(e) {
      var data = $(e.delegateTarget).data('foobarData');
      var $target = $(e.currentTarget);
      var index = data.find(data => typeof data.validateFunction === 'function' && !data.validateFunction(e));
      if (index > -1) {
        var foundData = data[index]

        e.preventDefault();
        e.stopPropagation();

        // Do stuff
        console.log(foundData.returnText);
      }
    });
  }
}