Может ли QuerySelectorВсе работать над динамическим добавленным контентом?

Question

Я пытаюсь применить querySelectorAll в динамическом контенте.
Я реализую код, как показано ниже:

<div class="drag" draggable="true">hello</div> 
<div class="drop"></div> 

Эти теги создаются динамически на странице. QuerySelectorAll не работает над обоими этими тегами.

  var cols = document.querySelectorAll('.drag'); 
     [].forEach.call(cols, function (col) { 
      col.addEventListener('dragstart', handleDragStart, false); 
      col.addEventListener('dragend', handleDragEnd, false); 
     }); 

     var colss = document.querySelectorAll('.drop'); 
     [].forEach.call(colss, function (col) { 
      col.addEventListener('dragenter', handleDragEnter, false) 
      col.addEventListener('dragleave', handleDragLeave, false); 
      col.addEventListener('dragover', handleDragOver, false); 
      col.addEventListener('drop', handleDrop, false); 
     }); 

Моя проблема заключается в том, что я пытаюсь применить код на этих двух DIV-х, но если эти теги статичны querySelectorAll работает, но если я создаю эти два DIV динамически они не работают.

Я применил этот код из HTML5 Перетаскивания ссылки API [ссылка]: http://www.html5rocks.com/en/tutorials/dnd/basics/

Заранее спасибо ... !!!

Answer 1

Я решил это с помощью jQuery. Код ниже работает лучше всего:

  $('body').on('dragstart', '.drgbl', function (e) { 
      handleDragStart(e) 
     }); 
     $('body').on('dragend', '.drgbl', function (e) { 
      handleDragEnd(e) 
     }); 
     $('body').on('dragenter', '.rght-element', function (e) { 
      handleDragEnter(e) 
     }); 
     $('body').on('dragleave', '.rght-element', function (e) { 
      handleDragLeave(e) 
     }); 
     $('body').on('dragover', '.rght-element', function (e) { 
      handleDragOver(e) 
     }); 
     $('body').on('drop', '.rght-element', function (e) { 
      handleDrop(e) 
     }); 

Этот код JQuery работает очень хорошо на динамических данных как .on() работ по обработке динамических данных, крепящие обработчик очень легко.

Спасибо всем, кто смог выяснить ответ.