CODEWITHSUNDEEP
javascriptjquery
Chinmay235
Chinmay235

Reputation: 3414

JQuery trigger() not working

  $(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>

I have used lightbox in my website. I want to show lightbox while click on h3 tag. I have alert a href(commented line) this is working fine. But not working trigger. Please see above my code. and tell me why trigger('click') not working in my code.

Thank you

Edit - Forgot about lightbox. simple anchor link not working.

Upvotes: 4

Views: 1328

Answers (4)

Sahal Tariq
Sahal Tariq

Reputation: 198

the reason why it is not triggering is because you have not assigned an event to anchor. try the snippet i attached. in this case an alert will show since i binded the anchor with a 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>

Upvotes: 0

muratoner
muratoner

Reputation: 2692

You can use direct click function.

  $(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>

Upvotes: 1

demonofthemist
demonofthemist

Reputation: 4199

Change your javascript code to this:

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

jQuery trigger won't work because no click event is binded to element, this is a javascript click function, which simulate the actual click like one with mouse!

Upvotes: 3

Oleksandr
Oleksandr

Reputation: 137

 $(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>

Upvotes: 0

Related Questions