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

See: http://api.jquery.com/on/ and https://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements — Vedant Terkar, Sep 05 '17 at 06:50
@Kamil Please share your `HTML` codes or anchor tag codes which load dynamicallly. — Shiladitya, Sep 05 '17 at 08:09

amicoderozer · Answer 1 · 2017-09-05T07:56:01.827

0

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.

edited Sep 05 '17 at 07:56

answered Sep 05 '17 at 06:52

amicoderozer

2,046
6
28
44

Thanks for your reply. But your solution with .load() (in my page) is the same like my. The image element is append after click event. And this solution is not functional, too: `$function () { $( '.detailTextContainer a' ).each(function() { var urlFoto = $(this).attr('href'); var imgElement = $("").attr('src', urlFoto) .addClass('dalsiFoto'); $(this).empty().append( imgElement ); }); };` – Kamil Novák Sep 05 '17 at 07:46
This should work, but you have to create your dynamic elements before each function. Try to create them in windows load function (or document ready) before each.Without html code is difficult to provide working example. – amicoderozer Sep 05 '17 at 07:57

score 0 · Answer 2 · answered Sep 05 '17 at 06:52

0

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>

answered Sep 05 '17 at 06:52

Manish Singh

934
1
12
27

score 0 · Answer 3 · answered Sep 05 '17 at 07:21

0

you can try "on" listener

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

answered Sep 05 '17 at 07:21

Raviteja

86
8

jQuery each method for dynamic elements autorun

3 Answers3