title: How to dynamically add an ondragstart event to a dynamically created div
body: <p>There are a couple of questions that seem to ask this question, but no one accepted answers and nothing has worked for me.</p>
  <p>I have a 'group' button that when it's clicked, will dynamically create a 'group' div (I then append some pre-selected 'child' divs within it)<br />
  However I need the new 'group' div to be draggable.<br />
  I can set the draggable attribute dynamically, no problem.
  But being draggable is not much good without the <code>ondragstart()</code> event, and no matter what I've tried, I can't get this assigned.<br />
  I am using jQuery which may have a bearing.</p>
  <p>The latest iteration of my code is (this appears in an <code>init()</code> function that is called from <code>body.onload</code>):</p>
  <pre><code>var group=$(document.createElement('div'));
  group.attr({id: 'group'+grpcount});
  group.attr({draggable: &quot;true&quot;});
  group.addClass('group');
  group.html(&quot;&lt;span class='group'&gt;Group&quot;+grpcount+&quot;&lt;/span&gt;&quot;);
  $('#boundary').append(group);   
  document.getElementById('group'+grpcount).addEventListener(&quot;startdrag&quot;,drag);
  </code></pre>
  <p>But I have also tried various combinations of jQuery <code>.bind</code>:</p>
  <pre><code>group.bind(&quot;dragstart&quot;, drag(ev));
  group.bind(&quot;dragstart&quot;, function(ev){drag(ev);});
  </code></pre>
  <p>All to no avail.</p>
  <p>I have a drag function already defined (and I've tried putting it before and after the code above):</p>
  <pre><code>function drag(ev) {
      ev.dataTransfer.setData(&quot;Text&quot;,ev.target.id+&quot;:&quot;+ev.pageX+&quot;:&quot;+ev.pageY);
  }
  </code></pre>
  <p>I hope there is something glaringly obvious that I just can't see.<br />
  Can somebody solve this?</p>