How to know if an element of the Sun has loaded with jquery?

2

How to know if a component has loaded, for example a div and not in the traditional way the whole page $(document).ready(function() { using jquery?

Try it like that but it does not work the div is this

<div id="calendar">
</div>

$(document).on('load','#calendar',function(){ 
  ShowMe("¡Procesando su reserva!, favor espere un momento.");      
});
    
asked by lucho 23.04.2018 в 02:50
source

2 answers

2

The event that indicates that an item has been loaded is called onload in the HTML specification and is part of the events that W3C Recommendation calls intrinsic events and they occur when the user agent finishes uploading:

  • the window ( window )
  • the document ( document or DOM)
  • windows frame that do not have frameset
  • the body element

The elements div unlike document or body do not have an envento onload to listen to. And they do not have it because it does not make any sense to have it: when you do this in jQuery:

$(function() 
  {
    console.log( "Todo cargado, el div incluido" );
  });

You already have an indicator that the div has been loaded.

If you still want to simulate a kind of div ready you can:

Use an attribute data that you would grant to div and that you would listen to JS.

Here, instead of Hola mundo , you could even put a function with parameters and execute it with eval . In addition, it has the advantage of being able to recover other data of the element, such as id .

$('[data-onload]').each(function() {
  var elem = $(this);
  var id = elem.prop('id');
  var tipo = elem.prop('nodeName');
  var txt = (tipo == "DIV") ? elem.text() : elem.val();
  var data = elem.data('onload');

  alert("Soy el " + tipo + "  " + id + " | data: " + data + " | texto: "+txt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar" data-onload="Hola mundo">Lorem ipsum dolor sit amet</div>

<input id="txtNombre" data-onload="enviarInput(this.value)" value="Pedro" />

Another way would be to place the Javascript code you want to run immediately after div .

Let's see two examples, with a direct code, another calling a function:

<script type="text/javascript">
  function onDivReady(msg) 
  {
    alert(msg);
  }
</script>

<div id="myDiv"></div>
<script type="text/javascript">
  alert("div cargado.... un pseudo div ready");
</script>

<div id="myDiv2"></div>
<script type="text/javascript">
  onDivReady("div 2 cargado.... un pseudo div ready con función");
</script>
    
answered by 23.04.2018 в 03:22
0

You're doing it wrong, the load() of jQuery is used as follows:

<div id="calendar">
</div>

<script type="text/javascript">
  $('#calendar').load(function() {
    ShowMe("¡Procesando su reserva!, favor espere un momento.");
  });
</script>
    
answered by 23.04.2018 в 03:29