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

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() returns 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);
      }
    });
  }
}

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

Issues with event delegation on same container

javascript

jquery

event-delegation