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