Onload click on picture with jQuery

Question

I have a website where I'm trying to auto click on picture using jQuery when site is loaded. I'm using wordpress and the code is implemented in footer. The site is https://mobimania.si/trgovina/ovitek-print-gold-mandala-copy/ and the actual picture is in "IZBERI MOTIV" section.

I have code but for some reason it doesn't work

jQuery("document").ready(function($) {
  setTimeout(function() {
    $("#mCSB_4.fpd-grid.fpd-item>picture").trigger('click');
  }, 10);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="mCSB_4" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_outside" style="max-height: none;" tabindex="0">
  <div id="mCSB_4_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr">
    <div class="fpd-grid fpd-grid-contain fpd-padding">
      <div class="fpd-item fpd-hidden" data-title="252105" data-source="/wp-content/uploads/2019/02/252105-e1551204819312.jpg" data-search="252105">
        <picture data-img="/wp-content/uploads/2019/02/252105-e1551204819312-188x300.jpg"></picture>
      </div>
    </div>
  </div>
</div>

Answer 1

You first need to fix

<script>jQuery function() {

I suggest

$(function() { 
  setTimeout(function() { 
    $("#mCSB_4").find("picture").trigger('click'); 
  },10); 
});

Your selector is wrong. You are trying to click a direct child of something that has id=mCSB_4 and both .fpd-grid.fpd-item classes

These will all work:

• $("#mCSB_4").find("picture").trigger('click');

• $("#mCSB_4 > .mCSB_container > .fpd-grid>.fpd-item > picture").trigger('click');
  direct descendants and

• $("#mCSB_4 .mCSB_container .fpd-grid .fpd-item > picture").trigger('click');
  using just the classes with spaces

NOTE This is assuming there is a click handler on that picture.

jQuery("document").ready(function($) {
  $("picture").on("click",function() {
    console.log("clicked")
  })
  setTimeout(function() {
    console.log("trying to click")
    $("#mCSB_4").find("picture").trigger('click');
  }, 10);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="mCSB_4" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_outside" style="max-height: none;" tabindex="0">
  <div id="mCSB_4_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr">
    <div class="fpd-grid fpd-grid-contain fpd-padding">
      <div class="fpd-item fpd-hidden" data-title="252105" data-source="/wp-content/uploads/2019/02/252105-e1551204819312.jpg" data-search="252105">
        <picture data-img="/wp-content/uploads/2019/02/252105-e1551204819312-188x300.jpg"></picture>
      </div>
    </div>
  </div>
</div>

Answer 2

You have some JavaScript errors on your page, please fix them.

About your problem: your code does not work because you are using the wrong selector, this one should work:

$("#mCSB_4 .fpd-grid .fpd-item > picture").trigger('click');

Please note the spaces, you have an element with id="mCSB_4" that contains an element with class "fpd-grid" that contains and element with class "fpd-item" which have a "picture child".

Without spaces you are searching for an element with id="mCSB_4" and those classes.