Why i am unable to bind a method on onClick event of div?

Question

I am trying to create div elements dynamically, and at the time of creation i am using onClick = 'showDimension();'. It shows the correct html on alert box but when DIV is created you can see that div is not having any onClick method attached [ firebug ]. Instead of that it is having a stray string 'showDimension();'. Why it is happening ? How to resolve it?
http://jsbin.com/inoqi3/3

Also, you can see that i am using

var eventDe = " onClick='showDimension("+i +");'";

and then, later this i will be used to find out the div id. Quite obvious it is not correct approach. How to use the event.target or event.srcElement to get the div from which the event is fired? I tried but unable to use that.

Answer 1

Update:

$('#element_id').live('click', function(event){
   var trget = event.target;
});

---

The jQuery has the live() method you can use to apply click event to dynamic elements.

Example:

$('#element_id').live('click', function(){
  // your code...
});

Answer 2

Why don't you try the div class name approach. Giv a class name to the div so that you can have a separate click handler

('.clasname').live(click,function()) like...this

Answer 3

If you don't want to use jQuery binders (live, bind, click) but the attribute onclick instead, make sure you add javascript: to indicate JS call and event as a parameter to your event handler so that you can access event.target and other data inside your function::

var eventDe = " onlick='javascript:showDimension(event, " + i + ");'";

I'd still recommend using jQuery. Remember that even if you are generating the HTML in your JS (such as in response for AJAX request), you can still do that using jQuery API and attach events to newly created nodes before you add them to parents (via methods like after).

Answer 4

You messed up with quotes. Sometimes you use " and sometimes '.

If you go to the route of generating your HTML by strings you may use ' to build your string in Javascript and the " for the HTML attributes as it should be. Like below:

  var style =  [' style="background-color: ' + getRandomColor(),
      'position:absolute;border: thick solid',
      'height: ' + height,
      'width: ' + width,
      'left: ' + left,
      'top: ' + top,
      '" '].join(';');

  var eventDe = 'onclick="showDimension(this);"';
  var innerText = 'DIV:' + i + '<br/> height: ' + height + '<br/>';      
  var html = '<div id="div' + i + '" ' + style + ' ' + eventDe + '>' + 
             innerText + '</div>';      

Note few things:

• Instead of the += you can use an Array and join
• You don't have to camelize onclick as attributes are not case sensitive
• The showDimension(this), this will give you the reference of the clicked DIV.

You can get it with:

function showDimension(div){      
  alert($(div).height());   
}

Something you may consider to avoid all these string manipulations is to use a javascript template engine. I contribute to PURE but there are plenty of others available.