I have div elements and if a div is clicked, I want to trigger a click event on the inner<a></a> tag. I need to do this, as there are validation functions on the click function of the anchor tags and they are not rendered by me.
This is my approach to do it:
$('.wrapperDiv').on('click', function(e) {
e.stopPropagation();
$(e.currentTarget).find('.link').trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div class="wrapperDiv">
<a class="link" href="https://google.com/" target="_self">Test A</a>
</div>
</li>
<li>
<div class="wrapperDiv">
<a class="link" href="https://bing.com/" target="_blank">Test B</a>
</div>
</li>
</ul>
Why do I get Uncaught RangeError: Maximum call stack size exceeded and how can I fix this?
Try to add e.preventDefault(); after e.stopPropagation();
stopPropagation() only prevent to trigger parent element click, Just do it with div click:
$('.wrapperDiv').on('click', function(e) {
e.stopPropagation();
var link = $(e.currentTarget).find('.link')
var win = window.open(link.attr('href'), link.attr('target'));
win.focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div class="wrapperDiv">
<a class="link" href="https://google.com/" target="_self">Test A</a>
</div>
</li>
<li>
<div class="wrapperDiv">
<a class="link" href="https://bing.com/" target="_blank">Test B</a>
</div>
</li>
</ul>
Related
I'm struggling with a very simple problem that I can't solve.
I'm using Framework7 (JS Framework for mobile application) and I have two list in my page:
First list:
<ul>
<li>
<a id="android" class="link external" target="_blank" href="android_link"></a>
</li>
<li>
<a id="iOS" class="link external" target="_blank" href="ios_link"></a>
</li>
<li>
<a id="windows" class="link external" target="_blank" href="windows_link"></a>
</li>
</ul>
Second list:
<ul>
<li>
<a href="fb_link" target="_blank" class="item-link item-content link external" id="facebook">
<div class="item-media">
<i class="f7-icons">logo_facebook</i>
</div>
<div class="item-inner">
<div class="item-title">Facebook</div>
</div>
</a>
</li>
<li>
<a href=instagram_link" target="_blank" class="item-link item-content link external" id="instagram">
<div class="item-media">
<i class="f7-icons">logo_instagram</i>
</div>
<div class="item-inner">
<div class="item-title">Instagram</div>
</div>
</a>
</li>
</ul>
So, I need to take the href attribute on click event. I wrote this:
Dom7('.link.external').on('click', (event) => {
// First try
href = event.target.getAttribute('href')
console.log(href)
// Second trye
console.log(event.srcElement.href)
// Third try
var href = Dom7('a.link.external').attr('href');
var id = Dom7('a.link.external').attr('id');
console.log(href)
console.log(id)
})
I've tried three different solutions, but none of them work.
The first one and second one works only for the first list, I think because the <a> tag doesn't contains html inside.
The third one always return me the href and id of the first elements of the first list (android), even if I click in the second list.
Can you help me to solve this problem?
Solution 1
<ul>
<li>
<a id="android" class="link external" target="_blank" href="android_link" onclick="linkClicked(this); return false;"></a>
</li>
</ul>
<script>
function linkClicked(object) {
consile.log(object.getAttribute("href"));
return false;
}
</script>
Solution 2
var elements = document.getElementsByClassName('link');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', linkClicked, false);
}
function linkClicked() {
console.log(this.getAttribute("href"));
};
if you can use jquery, use this working code :
$('.link.external').on('click', (event) => {
href = event.target.getAttribute('href');
alert(href);
});
jsfiddle
I have a sub-menu inside the navbar under the Services nav-item.
The expected behavior is once the Service is clicked, the sub-menu shows up. The actual behavior is: once the Service is clicked, the sub-menu flashes and disappears.
<nav id="main-menu">
<ul class="sf-navbar">
<li>
<a href="#home">
<div data-i18n="nav.home">Home</div>
</a>
</li>
<li>
<a href="#">
<div data-i18n="nav.services.title">Title</div>
</a>
<ul>
<li>
<a href="#service">
<div data-i18n="nav.services.ourservices">Our Services</div>
</a>
</li>
<li>
<a href="#how">
<div data-i18n="nav.services.howwework">How We Work</div>
</a>
</li>
<li>
<a href="#areascontainer">
<div data-i18n="servicearea.title">Service Area</div>
</a>
</li>
<li>
<a href="#why">
<div data-i18n="why.title">Why Choose Us</div>
</a>
</li>
</ul>
</li>
.....
</nav>
JS code:
wei.header = {
init: function(){
wei.header.superfish();
},
superfish: function() {
$( main_menu ).superfish({
popUpSelector : 'ul',
delay : 250,
speed : 350
});
},
...
I have tried to debug it, but have no clue where to start.
Here is the code that I am working on.
http://weistudio.com.au/
For some reason, SuperFish fails here on touchEnd event and only for the menu shown when you at the very top of the page (it works if you scroll page a bit - there is a clone of this menu).
To prevent it you could use something like <a href="#" onTouchEnd="(function (e) {e.preventDefault()})(event)">.
Or move it to an external method and use like this (as you using jQuery already):
$('.header-container').on('touchend', '.sf-with-ul', function (e) {e.preventDefault()})
This question already has answers here:
Use jQuery to hide a DIV when the user clicks outside of it
(40 answers)
Closed 5 years ago.
I have my dropdown, it is working on click of its parent anchor tag, but now i want to close it on body click
I have try to do it with event.stopPropagation();
but it didn't work, here is my code -
$(".mydropd > a").click(function() {
$(this).siblings(".mycustom_dropd").slideToggle();
});
$('body').click(function(event) {
$(".mycustom_dropd").slideUp();
event.preventDefault();
event.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="mydropd">
<a href="#" class="mydropd_a">menu
<span class="line1"></span>
<span class="line2"></span>
<span class="line3"></span>
</a>
<ul class="mycustom_dropd">
<li>
<img src="images/vibgyor.png"> VIBGYOR
</li>
<li>MULTIPLAYER</li>
<li>RAPTOP</li>
<li>HELP</li>
<li>PROFILE</li>
</ul>
Wrap code in jQuery ready function.
<script type="text/javascript">
$(function() {
$(".mydropd > a").click(function(){
$(this).siblings(".mycustom_dropd").slideToggle();
event.preventDefault();
event.stopPropagation();
});
$('body').click(function(event){
$(".mycustom_dropd").slideUp();
});
});
</script>
<div class="mydropd">
<a href="#" class="mydropd_a">Click Here
<span class="line1"></span>
<span class="line2"></span>
<span class="line3"></span>
</a>
<ul class="mycustom_dropd">
<li><img src="images/vibgyor.png"> VIBGYOR</li>
<li>MULTIPLAYER</li>
<li>RAPTOP</li>
<li>HELP</li>
<li>PROFILE</li>
</ul>
</div>
I am working on a JavaScript class so when link is clicked that has a class of parent it will remove it and then add a class of .open
I have got addClass working but is not removing parent class when click on.
And when clicked closed should remove class open and revert it back to parent.
JavaScript Code
<script type="text/javascript">
$('.parent').on('click', function() {
$('.parent').addClass('.open').removeClass('.parent');
});
</script>
HTML Code
<div class="site-container">
<header id="header">
</header>
<div id="column_left" class="active">
<nav id="menu">
<ul class="nav">
<li><i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span></li>
<li><a class="parent" data-toggle="collapse" data-target="#setting"><i class="fa fa-cog"></i> <span>System</span></a>
<ul id="setting" class="nav collapse">
<li><a data-toggle="collapse" data-target="#user">Users</a>
<ul id="user" class="nav collapse">
<li>Users</li>
<li>User Group</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="page-container">
<div class="container-fluid">
<div class="page-header">
<h1>Dashboard <small>Dashboard Stats</small></h1>
</div>
</div>
</div>
</div>
The whole idea is to toggle classes "parent" and "open" on link click.
Because of dynamical element classes it should be $(static_selector).on('click', '.parent,.open'.
JSFiddle example.
$(document).ready(function()
{
$(document).on('click', '.parent,.open', function()
{
$(this).toggleClass("parent open");
});
});
try something like this
<script type="text/javascript">
$('.parent').on('click', function() {
$(this).addClass('open').removeClass('parent');
});
</script>
You shouldn't add the period in addClass() and removeClass():
Replace:
$('.parent').addClass('.open').removeClass('.parent');
With:
$('.parent').addClass('open').removeClass('parent');
Also, it's more efficient to use $(this) instead of $('.parent') in the event listener, since this is the target of the click event. jQuery won't have to look for .parent, then.
No need to apply . as class when you add or remove class, check here
$('.parent').on('click', function() {
$('.parent').addClass('open').removeClass('parent');
});
I´m trying to target a <div> which is the next <li> of the parent <div> of the function show_projectinfo(). I've tried .next(), .closest(), etc... with no luck, any ideas?
The function is that if I click on a.more_info then the li.slider img is hidden... I don´t know if it is out of scope completely... This is a div that is repeated so I can´t just use the IDs.
markup:
<li class="info">
<a id="previous-slider"> < </a>
<span>01/15</span>
<a id="next-slider" href="javascript:void(0)"> > </a>
<a class="more_info" href="javascript:void(0)" onclick="show_projectinfo()">Info</a>
</li>
<li class="slider">
<img src="img/horizontal.jpg" alt="horizontal" width="624" height="429">
</li>
this is the script:
function show_projectinfo(){
$(this).closest('.slider img').hide();
$('.info_content').fadeIn();
}
The basic problem is that you are calling the method from onclick instead of binding it with jquery.
In the way you use it, the this refers to the window and not the element that was clicked.
function show_projectinfo(e){
e.preventDefault();
$(this).parent().next().find('img').hide();
$('.info_content').fadeIn();
}
$(function(){
$('.more_info').click(show_projectinfo);
});
and remove the onclick attribute from the html
If you have (although you shouldn't) to use the onclick attribute then pass it the this as an argument
function show_projectinfo(element){
$( element ).parent().next().find('img').hide();
$('.info_content').fadeIn();
}
and
<a class="more_info" href="javascript:void(0)" onclick="show_projectinfo(this)">Info</a>
Try:
$(this).parent().next() // parent() should be the <li> then next() will get your next <li>
$('.more_info').click(function(e){
e.preventDefault();
$(this).parent().next().find('img').hide();
$('.info_content').fadeIn();
});
Instead of .closest use .parent and .next, then select the img with .find.
Check out this jsFiddle:
$("a.more_info").bind("click", function(e){
e.preventDefault();
$(this).parent("li").next("li.slider").find("img").hide();
$('.info_content').fadeIn();
return false;
});
$('li').click( function (){
var nextLi = $(this).closest('div').next().children('li:first-child').attr('id');
console.log(nextLi);
});
Considering below markup:
<div id='div1'>
<li id='1'>1</li>
<li id='2'>2</li>
<li id='3'>3</li>
</div>
<div id='div2'>
<li id='4'>4</li>
<li id='5'>5</li>
<li id='6'>6</li>
</div>
You can see my live jsFiddle for more details.