[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2007-07-22
8
Medium Priority
?
1,942 Views
Last Modified: 2011-10-03
how can i attach onclick="someFunction(this)" to a div through javascript?  how can i de attach it?  thanks
0
Comment
Question by:wrynn
6 Comments
 
LVL 17

Expert Comment

by:jasonsbytes
ID: 19544689
document.getElementById('divID').onclick = someFunction();
0
 
LVL 17

Expert Comment

by:jasonsbytes
ID: 19544693
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:wrynn
ID: 19544757
but how can i do el.onclick = showPopup(this)  
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 1000 total points
ID: 19544798
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
 
LVL 1

Assisted Solution

by:nee_nov
nee_nov earned 1000 total points
ID: 19545223
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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question