Добавить событие click в элемент, вставленный javascript

если я нажму на первое "редактировать", я получу console.log('click happend') но если я добавлю один из этих ящиков через javascript (нажмите "Добавить поле"), а затем Edit click из этой новой коробки не работает. Я знаю, что это потому, что javascript запускается, когда элемента не было, и поэтому нет прослушивателя событий click. Я также знаю, что с 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 здесь

это Q / A полезная информация но это не ответ на мой вопрос о том, как решить проблему. Например, как я могу вызвать eventListener (ы), как new XXX.ClickMe(element); для тех элементов, которые динамически вставляются в DOM?

6
event-delegation javascript

4 ответов

вот метод, который имитирует $('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(), что позволяет делегированию событий эффективно делегировать, инициализируя только один экземпляр для каждого .edit элемент, а затем ссылка на уже созданный экземпляр в будущем делегированном щелчки по статическому методу ClickMe.get(element).

слабые ссылки позволяют экземпляров ClickMe() для сбора мусора, если его ключ элемента когда-либо удаляется из DOM и выпадает из области видимости.

2

вы можете сделать что-то подобное... 

document.addEventListener('click',function(e){
    if(e.target && e.target.className.split(" ")[0]== 'edit'){
     new XXX.ClickMe(e.target);}
 })


var XXX = {};
XXX.ClickMe = function(element) {
  this.element = element;


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



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


document.addEventListener('click', function(e) {
  if (e.target && e.target.className.split(" ")[0] == 'edit') {
    console.log('click happend');
  }
})
[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>
2

сделайте это как jQuery: имейте родительский элемент, который управляет делегированием события. В следующем, я использую document.body как родитель:

document.body.addEventListener('click', e => {
  if (e.target.matches('.edit')) {
    // do whatever 
  }
});

пример:

var XXX = {};
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));
};


new XXX.PrototypeTemplate(document.querySelector('[data-prototype]'));

document.body.addEventListener('click', e => {
  if (e.target.matches('.edit')) {
    // do whatever
    console.log('click happend');
  }
});
[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>

посмотрите, что говорит MDN о Element.prototype.matches.

2

спасибо всем, отвечая на вопрос, это все полезная информация. Как насчет следующего:

оберните все функции, необходимые внутри XXX.InitializeAllFunctions = function(wrap) {} и передать document как обернуть на первой странице загрузки. Поэтому он ведет себя так же, как и раньше. При вставке новых элементов DOM просто передайте их также этой функции перед вставкой в DOM. Работает как шарм:

var XXX = {};

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

XXX.PrototypeTemplate = function(element) {
    this.element = element;

    addBox = function() {
        var tmpl = this.element.getAttribute('data-prototype');
        var html = new DOMParser().parseFromString(tmpl, 'text/html');

        XXX.InitializeAllFunctions(html);  // Initialize here on all new HTML
                                           // before inserting into DOM

        this.element.parentNode.insertBefore(
            html.body.childNodes[0],
            this.element
        );
    };

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

XXX.InitializeAllFunctions = function(wrap) {

    var wrap = wrap == null ? document : wrap;

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

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

XXX.InitializeAllFunctions(document);
[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>
0