• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1947
  • Last Modified:

attaching and detaching onclick=somefunction(this) to a div dynamically

how can i attach onclick="someFunction(this)" to a div through javascript?  how can i de attach it?  thanks
0
wrynn
Asked:
wrynn
2 Solutions
 
jasonsbytesCommented:
document.getElementById('divID').onclick = someFunction();
0
 
jasonsbytesCommented:
another example:

var el = document.getElementById('foo');
el.onclick = showPopup;
//NOTE: showPopup();
//or showPopup(param);
//will NOT work here.
//Must be a reference to a function,
//not a function call.

function showPopup() {
  var popup = window.open(this.href, "popup", "height=800,width=600");
  popup.focus();
  return false;
}
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
wrynnAuthor Commented:
but how can i do el.onclick = showPopup(this)  
0
 
ZvonkoSystems architectCommented:
cannot be. that does not assign showPopup() but assigns the return value from showPopup().

So, if there are parameters to be passed to onClick handler then an anonymous function has to be passed to onclick event handler.
Like this:

theDivObject.onclick = function(){alert("The div content is this: "+this.innerHTML)};

If you have to pass some variables to the event handler then you have to use another anonymous function definition.
Like this:

for(var i=0;i<divArray.length;i++){
  divArray[i].onclick = new Function("alert('Div number "+i+" ')");
}

That was event handler assignment.
To delete the event handler assignment assign the value: null
It would work to assign empty string too, but better use null.
Like this:
theDiv.onclick = null;

Or to do the click handler only once do it like this:
theDivObject.onclick = function(){alert("The div content is this: "+this.innerHTML);this.onclick=null;};





0
 
nee_novCommented:
Hi,

Try this example:

<html>
<head>
<script language="javascript">

function clicked()
{
      alert("clicked");
}


function addEvent()
{
var myDiv = document.getElementById('div1');
if (myDiv.addEventListener){
  myDiv.addEventListener('click', clicked, false);
} else if (myDiv.attachEvent){
  myDiv.attachEvent('onclick', clicked);
}

}



function removeEvent()
{
var myDiv = document.getElementById('div1');
if (myDiv.removeEventListener){
  myDiv.removeEventListener('click', clicked, false);
} else if (myDiv.detachEvent){
  myDiv.detachEvent('onclick',clicked);
}            
}


</script>
</head>
<body>
<div id="div1">This is a div for test</div>
<input type="button" value="Add" onclick='addEvent()'>
<input type="button" value="Remove" onclick='removeEvent()'>
</body>
</html>

I hope this will solve your problem
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now