How to add onload event to a div using jquery or javascript?

Question

hi guys i am trying to call a function on the onload event of a div but i can't find anything that would help me call a function on the onload event. i did try to call it using this "oQuickReply.swap" but it didn't work as that would only swap the position. so can you tell me how can i add a onload event on a div? my question is different as i have a function that can only be called in a loop to take the 'post_id' value to the function the onload event i want is to call my function select_comment() which would get me all the comments from my database to the page. let me show you my code and if there is something you dont understand tell me beforehand i will detail it.

     <script type="text/javascript">
 $(window).load(function(e){

    // grab the scroll amount and the window height
       loadmore();
       select_likes();

       select_share();
       // get_recieve_friend_requests();
       // get_sent_friend_requests();
    });

 function loadmore(){
          var lastID = $('.load-more').attr('lastID');
         // alert(lastID);

              jQuery.ajax({
                  type:'POST',

                  url:'<?php echo base_url("user/get_all_post"); ?>',
                   data: {id:  lastID },
                      dataType: 'json', 


                  beforeSend:function(data){
                      $('.load-more').show();
                  },
                  success:function(data){

                         var ParsedObject = JSON.stringify(data);            
                         var json = $.parseJSON(ParsedObject);


                         if (json=="") {
                          $("#bottom").append('<div class="btn btn-default col-md-6" >'+'No More Results'+'</div>');
                          $("#Load_more_data").hide()

                         }else{

                           $postID=json[json.length-1].id;

              $('.load-more').attr('lastID', $postID);

                $.each(json, function (key, data) {


   var post_id=data.id;
    var post_status=data.status;
     var status_image=data.status_image;
    var multimage=data.multimage;



                             if(!post_status=="" && !status_image==""){
                               $("#status_data").append('<div class="panel-footer" onload="select_comment('+post_id+');"><div class="row"><div class="col-md-12"><a href="#">13 people</a> like this</div></div><ul class="media-list"><li   class="media_comment"></li><li class="media"><div class="media-left media-top"><?php echo img($user_file_image); ?></div><div class="media-body"><div class="input-group"><form action="" id="form_content"><textarea name="textdata" id="content_comment" cols="25" rows="1"  class="form-control message"  placeholder="Whats on your mind ?"></textarea><button type="submit" id="comment_button" onclick="comment_here('+post_id+');">Comment</button></form></div></div></li></ul></div></div>');                 

                    });
                  }
              }
            });
          }
function select_comment(post_id)
{

  alert(post_id);

  var User_id = $('.id_data').attr('value');
 jQuery.ajax({
                  type:'POST',
                  url:'<?php echo base_url("user/select_comment"); ?>',
                  data: {Post_id:Post_id,User_id:User_id},
                  dataType: 'json', 
                  success:function(data)
                  {
                    alert('you have like this');
                  }
          });

}

now you see that's how i want to use my function to call when that div loads.

`div` elements have no `load` event. If you give us more information, we can probably help you do what your actual end goal is, though. — T.J. Crowder, Mar 07 '17 at 12:33
Possible duplicate of [Javascript onload function alternative](http://stackoverflow.com/questions/42037147/javascript-onload-function-alternative) — Aman Kumar, Mar 07 '17 at 12:35

score 0 · Answer 1 · answered Nov 10 '21 at 06:32

Please Refer Below Code. may Be help you

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
#divstyle {
text-align: center;
background-color: cadetblue;
width: 550px;
height: 180px;
margin-left: 100px;
}
</style>
</head>
<body onload="myFunction()">
<div id="divstyle">
<h2>Welcome to the tutorial for onload event!</h2>
<hr />
<h3>The function will be executed once the page is fully loaded.</h3>
</div>
<script>
function myFunction() {
alert("Hello, User!");
}
</script>
</body>
</html>

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Nov 10 '21 at 06:46

score -2 · Answer 2 · answered Mar 07 '17 at 12:39

-2

use jQuery to this:

<script
              src="https://code.jquery.com/jquery-3.1.1.min.js"
              integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
              crossorigin="anonymous"></script>
<script>
        $('.when-element-with-this-class').ready(function() {
            alert( "ready!" );
        });
</script>

<div class="when-element-with-this-class">
when this div is ready, js procced function with alert command
</div>

https://jsfiddle.net/g7re6khu/

answered Mar 07 '17 at 12:39

Paul

170
6

what is the 'integrity' and 'crossorign' ? @Paul – Himanshu Goyal Mar 07 '17 at 16:35
Hey those two fields is for security issues when you using CDN. They are core when you using CDN. More about it: CORS https://en.wikipedia.org/wiki/Cross-origin_resource_sharing CDN https://en.wikipedia.org/wiki/Content_delivery_network Hope I help :) – Paul Mar 07 '17 at 16:47

Chandan Kumar · Answer 3 · 2019-03-27T14:11:42.573

-3

you can use ready function on any element, window or document. Once the targeted element is loaded the required block is executed. Below is example for same.

$("#myid").ready(function(){
    //block will be loaded with element with id myid is ready in dom
})

edited Mar 27 '19 at 14:11

answered Mar 27 '19 at 11:50

Chandan Kumar

1,066
10
16

While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. [From Review](https://stackoverflow.com/review/low-quality-posts/22583672) – double-beep Mar 27 '19 at 12:23
This is actually not the case, what this will do is simply listen for a regular document ready. It doesn't matter what selector is used (or any at all), it says so [in the documentation](https://api.jquery.com/ready/). – Shikkediel Mar 27 '19 at 14:24

How to add onload event to a div using jquery or javascript?

3 Answers3