JQuery trigger () not working

Question

  $(function(){
      $('.parent-class h3').click(function(){
         $(this).siblings('p').find('a').trigger( "click" );
         //var h = $(this).siblings('p').find('a').attr( "href" );
         //alert(h);
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="parent-class">
    <p class="child-class">
        <a href="hello.jpg" data-rel="lightbox-1">Lightbox Image</a>
    </p>
    <h3>Title Here</h3>
</div>

Run codeHide result

I used a lightbox on my website. I want to show the lightbox by clicking on the tag h3. I have a ahref (commented line) warning , this works fine. But the trigger does not work. See above my code. and tell me why it trigger('click')doesn't work in my code.

thank

Edit - Forgot about lightbox. simple binding does not work.

Answer 1

Change javascript code to this:

$(function(){
      $('.parent-class h3').click(function(){
         $(this).siblings('p').find('a')[0].click();
      });
});

jQuery trigger will not work because the click event is not bound to the element, it is a javascript click function that mimics the actual click like a mouse!

Answer 2

.

  $(function(){
      $('.parent-class h3').click(function(){
         $(this).siblings('p').find('a').click()
         //var h = $(this).siblings('p').find('a').attr( "href" );
         //alert(h);
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="parent-class">
    <p class="child-class">
        <a href="hello.jpg" data-rel="lightbox-1">Lightbox Image</a>
    </p>
    <h3>Title Here</h3>
</div>

Hide result

Answer 3

 $(function(){
      $('.parent-class h3').click(function(){
         //$(this).siblings('p').find('a').trigger( "click" );
         var h = $(this).siblings('p').find('a').attr( "href" );
         location.href = h;
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent-class">
    <p class="child-class">
        <a href="hello.jpg" data-rel="lightbox-1">Lightbox Image</a>
    </p>
    <h3>Title Here</h3>
</div>

Hide result

Answer 4

the reason it does not fire is because you did not assign an event to bind. try the piece that I attached. in this case, a warning will appear, since I linked the anchor with the click event

$(function(){
      $('.parent-class h3').click(function(){
         $(this).siblings('p').find('a').trigger( "click" );
         //var h = $(this).siblings('p').find('a').attr( "href" );
         //alert(h);
      });
      $("a").click(function(){
      alert('hi')
      })
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="parent-class">
    <p class="child-class">
        <a href="hello.jpg" data-rel="lightbox-1">Lightbox Image</a>
    </p>
    <h3>Title Here</h3>
</div>

Run codeHide result