adding event listener dynamically

Question

I'm trying to do add an event listener to a dynamically created object

var teamDiv = document.createElement("div");

obviously, following doesn't work:

teamDiv.onDragStart="drag(event)";

so I tried this:

teamDiv.addEventListener("dragstart",function(event){drag(event);});

and

var dragFunction = new Function("event","drag(event);");
teamDiv.addEventListener("dragstart", dragFunction);

and

teamDiv.addEventListener("dragstart", function(teamDiv) {dragObj(teamDiv);});

but nothing works. Can anyone help me with this?

thanks in advance,

Dirk

developer.mozilla.org/en-US/docs/Web/Reference/Events/dragstart — Aprillion
– Aprillion, Commented Nov 3, 2013 at 13:53

Ingo Bürk · Accepted Answer · 2013-11-03 14:04:09Z

4

Did you remember to a) append the element and b) make it draggable? See this:

var teamDiv = document.createElement('div');

// make it draggable
teamDiv.draggable = 'true';

// append it
document.body.appendChild(teamDiv);

function drag(event) {
    alert("You dragged me");
}

// either one of those will work
// teamDiv.addEventListener("dragstart", drag);
// teamDiv.ondragstart = drag;

Fiddle: http://jsfiddle.net/ZfXa5/1/

Events aren't camel-cased, so onDragStart won't work, it has to be ondragstart. You should also really avoid putting executable code into strings. They will be eval-ed, which is just completely unnecessary. eval is evil.

answered Nov 3, 2013 at 14:04

Ingo Bürk

20.2k7 gold badges72 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

EasterBunnyBugSmasher Over a year ago

thanks! I think it already worked from start. My problem was... I expected to see the ondragstart attribute in the div tag when inspecting it with the Firefox Inspector.

Collectives™ on Stack Overflow

adding event listener dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related