javascript - 为javascript插入的元素添加点击事件

Question

如果我点击第一个“编辑”，我会得到一个 console.log('click happend') 但是如果我通过 javascript 添加其中一个框(点击“添加框”)然后从这个新框中编辑 click 不起作用。我知道这是因为 javascript 在元素不存在时运行，这就是为什么没有点击事件监听器的原因。我也知道使用 jQuery 我可以这样做:

$('body').on('click', '.edit', function(){ // do whatever };

这样就可以了。

但是我如何使用纯 Javascript 执行此操作？我找不到任何有用的资源。创建了一个我想工作的简单示例。解决这个问题的最佳方法是什么？

所以问题是:如果您添加一个框，然后单击“编辑”，则没有任何反应。

var XXX = {};
XXX.ClickMe = function(element){
    this.element = element;
    
    onClick = function() {
        console.log('click happend');
    };
    
    this.element.addEventListener('click', onClick.bind(this));
};

[...document.querySelectorAll('.edit')].forEach(
    function (element, index) {
        new XXX.ClickMe(element);
    }
);


XXX.PrototypeTemplate = function(element) {
    this.element = element;
    var tmpl = this.element.getAttribute('data-prototype');

    addBox = function() {
        this.element.insertAdjacentHTML('beforebegin', tmpl);
    };

    this.element.addEventListener('click', addBox.bind(this));
};


[...document.querySelectorAll('[data-prototype]')].forEach(
    function (element, index) {
        new XXX.PrototypeTemplate(element);
    }
);

[data-prototype] {
  cursor: pointer;
}

<div class="box"><a class="edit" href="#">Edit</a></div>

<span data-prototype="<div class=&quot;box&quot;><a class=&quot;edit&quot; href=&quot;#&quot;>Edit</a></div>">Add box</span>

JSFiddle here

This Q/A is useful information但它没有回答我关于如何解决问题的问题。比如我如何为那些动态插入 DOM 的元素调用像 new XXX.ClickMe(element); 这样的 eventListener？

Answer 1

这是一个模仿 $('body').on('click', '.edit', function () { ... }) 的方法:

document.body.addEventListener('click', function (event) {
  if (event.target.classList.contains('edit')) {
    ...
  }
})

将其应用到您的示例中(我将稍微修改一下):

var XXX = {
  refs: new WeakMap(),
  ClickMe: class {
    static get (element) {
      // if no instance created
      if (!XXX.refs.has(element)) {
        console.log('created instance')
        // create instance
        XXX.refs.set(element, new XXX.ClickMe(element))
      } else {
        console.log('using cached instance')
      }
      
      // return weakly referenced instance
      return XXX.refs.get(element)
    }

    constructor (element) {
      this.element = element
    }
    
    onClick (event) {
      console.log('click happened')
    }
  },
  PrototypeTemplate: class {
    constructor (element) {
      this.element = element
      
      var templateSelector = this.element.getAttribute('data-template')
      var templateElement = document.querySelector(templateSelector)
      // use .content.clone() to access copy fragment inside of <template>
      // using template API properly, but .innerHTML would be more compatible
      this.template = templateElement.innerHTML
      
      this.element.addEventListener('click', this.addBox.bind(this))
    }
    
    addBox () {
      this.element.insertAdjacentHTML('beforeBegin', this.template, this.element)
    }
  }
}

Array.from(document.querySelectorAll('[data-template]')).forEach(function (element) {
  // just insert the first one here
  new XXX.PrototypeTemplate(element).addBox()
})

// event delegation instead of individual ClickMe() event listeners
document.body.addEventListener('click', function (event) {
  if (event.target.classList.contains('edit')) {
    console.log('delegated click')
    // get ClickMe() instance for element, and create one if necessary
    // then call its onClick() method using delegation
    XXX.ClickMe.get(event.target).onClick(event)
  }
})

[data-template] {
  cursor: pointer;
}

/* compatibility */
template {
  display: none;
}

<span data-template="#box-template">Add box</span>

<template id="box-template">
  <div class="box">
    <a class="edit" href="#">Edit</a>
  </div>
</template>

这使用 WeakMap()持有对 ClickMe() 的每个实例的弱引用，这允许事件委托(delegate)通过只为每个 .edit 元素初始化一个实例，然后引用已经存在的实例来有效地委托(delegate)- 通过静态方法 ClickMe.get(element) 创建 future 委托(delegate)点击的实例。

弱引用允许 ClickMe() 的实例在其元素键从 DOM 中删除并超出范围时被垃圾回收。