jQuery each method for dynamic elements autorun

Question

$('body').on('click', function () {
  $( '.detailTextContainer a' ).each(function() {
    var urlFoto = $(this).attr('href');
    var imgElement = $("<img />").attr('src', urlFoto)
                                 .addClass('dalsiFoto');

    $(this).empty().append( imgElement );   
  });
});

How can I run this function automatically after load page (without event). '.detailTextContainer a' are dynamic elements, which are loaded to page immediately after start page.

I tried this code:

function showImage (){
  $( '.detailFeatureDesc a' ).each(function() {
    var urlFoto = $(this).attr('href');
    var imgElement = $("<img />").attr('src', urlFoto)
                                 .addClass('dalsiFoto');
    $(this).empty().append( imgElement );
  });
};

showImage();

But this weren't successfully.

Thanks

Answer 1

You can use load function:

$( window ).load(function() {

      // create detailTextContainer here
      $( '.detailTextContainer a' ).each(function() {
             var urlFoto = $(this).attr('href');
             var imgElement = $("<img />").attr('src', urlFoto)
                                          .addClass('dalsiFoto');

        $(this).empty().append( imgElement );   

      });

});

From documentation, this will run the function when the page is fully loaded including graphics.

Or you can use:

$( document ).ready(function() {

});

or the shorthand:

$(function() {

});

This will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

Answer 2

you should simply write function on window load function

<script>
$( document ).ready(function() {
    console.log( "document loaded" );
});

$( window ).on( "load", function() {
   //write your code is given section
});
</script>

Answer 3

you can try "on" listener

$(document).on("click", ".detailTextContainer a", function() {
  // your code
});