Avatar of jszeto
jszeto
 asked on

How to bind an onload event to a div element in javascript/jQuery?

Want to do something like this:

<div onload="fireevent()"></div>

but onload seems only work on window and entire dom, any ideas?
jQueryJavaScriptHTML

Avatar of undefined
Last Comment
jszeto

8/22/2022 - Mon
hforhirenpatel

Hi,
   jszeto

   U can do one another thing for same function.

$(window).bind("load", function() {
      fireevent();
});


Note: U must write this function between Javascript tag.
This will load on page startup.
jszeto

ASKER
I want to fire onload event for each of the <div>s with different parameters passed into a user-defined function, so basically $(window).bind does not fit in this scenario.
hforhirenpatel

Hi,
 jszeto
   
  U can do the same thing here also call multiple function from onload and pass multiple parameter to diff function.

  If the same thing is not possible in your scenario then can u elaborate your purpose of use the same thing with details of your code.

Thanks
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
jszeto

ASKER
The scenario is, when the page loads, each <div> would fire an event and pass a value (say, the <div>'s ID) into one single function and generate a new width for that specific <div>, do you have any suggestions? So basically each of the <div>s' width would dynamically generate when the page loads.
jszeto

ASKER
Here is the code snippet I came across, but it did not work:

<script type="text/javascript">
		$(function(){
			$('.progressBar').each(function(){
				var xmlhttp;
				var barID = $(this).attr("ID");
				if(window.XMLHttpRequest){
					xmlhttp=new XMLHttpRequest();
				}else{
	  				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  			}
	  			xmlhttp.onreadystatechange = function(){
	  				if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
	  					$(this).css('width', xmlhttp.responseText);

	  					var temp = parseInt(xmlhttp.responseText);
	  					var indicator = temp/19*10 + '%';

	  					$(this).find('span').html(indicator);
	  				}
	  			}
	  			xmlhttp.open("GET","loadWidth.php?id="+barID,true);
	  			xmlhttp.send();
			})
  		}
	</script>

Open in new window

Jon Norman

how about:
$(window).ready(function() {
    $("div").each(function(){
        fireevent(this);
    });
});

Open in new window

This will fire the fireevent function for all divs, passing the current div as a parameter to the function.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Sar1973

The onload event is not supported by every element (see this tutorial).
Unless you intend to fire a function at every time your divs are accessed/clicked, I suggest then to use a function that is fired on body load and that fires events for your divs only, like this example:
function .... {
var divs = document.getElementsByTagName("div");
for(i=0;i<divs.length;i++){
(what you want)
ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
jszeto

ASKER
Thanks, really good tips.