I am trying to detect if a link was clicked with JS.
This is my code:
<div onclick="setLocation('http://domain.com/test')" class="gd-details" id="detail-box2">
<h2 class="gd-product-name">
<a title="test" href="http://domain.com/test">content 1</a>
</h2>
</div>
I'm also trying with this code and it doesn't works:
$(document).on("click", "a", function() {
var href = $(this).attr("href");
if(href == 'http://domain.com/test'){
alert('clicked');
} else {
alert('not clicked');
}
});
How do I detect if a specific link is clicked?
Add an event handler to the div click and compare the onclick attribute to your test url.
$(document).on("click", "div", function() {
var href = $(this).attr("onclick");
if(href === "setLocation('http://domain.com/test')"){
alert('clicked');
} else {
alert('not clicked');
}
});
Related
I have written simple quiz with two cards. After user have clicked on the card, attribute clicked change status and answer is checked.
clicked = false;
$(document).on("click", "#card1", function() {
clicked = true;
check answer........
});
I have got antoher on click event, which should load next question when user click on body element.
This event should only work when the card is clicked and clicked status is true.
$(document).on("click", "body", function() {
if (clicked == true) {
quiz.nextQuestion();
clicked = false;
}
});
But these two onclick events start and execute simultaneously.
How can I prevent this?
stopPropagation(); can be used for this. Otherwise click on elements inside will also trigger the body click functions.
One more thing is that, we have to give click for <html> rather than <body>.
Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
clicked = false;
$(document).on("click", "#card1", function(e) {
e.stopPropagation();
clicked = true;
console.log('click card');
});
$(document).on("click", "html", function(e) {
if (clicked == true) {
console.log('click body');
clicked = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="card1">
Card1
</div>
</body>
Simple...
clicked = false;
$(document).on("click", "#card1", function() {
clicked = true;
//check answer........
$(this).on("click", "body", function() {
if (clicked == true) {
quiz.nextQuestion();
clicked = false;
}
});
});
Hope this helps.....
You can do it by changing the status of clicked as true after you have checked the answer.
$(document).on("click", "#card1", function() {
check answer........
clicked = true;
});
This will make sure that clicked is not made true as soon as the click event is fired hence making the if statement in the second part of the code false
OR
You can even do it by
clicked = 0;
$(document).on("click", "#card1", function() {
clicked = 1;
check answer........
});
$(document).on("click", "body", function() {
if (clicked == 2) {
quiz.nextQuestion();
clicked = 0;
}else
{
clicked +=1;
}
});
if condition working but else condition not working.
(function($){
$(".single-product a").on("click", function(e){
var link = $(".single-product a").attr("href");
if(link == "#"){
e.preventDefault();
}else{
return true;
}
});
}(jQuery));
have you tried this? using prop on the attr it might be your jquery library is higher
$(document).on("click",".single-product a", function(e){
var link = $.trim($(this).prop("href"));
(link == "#") ? e.preventDefault() : '';
});
With the attribute contains selector [name*=”value”]:
$('.single-product a[href*="#"]').on('click', function (e) {
e.preventDefault();
});
<div class="single-product">
With #
</div>
<div class="single-product">
Without #
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have multiple toggle elements on my page. I am trying to get them closed when clicking on the outside of the div element. the script i have now works veyr well with multiple elements but it also closes the div when clicking on inside of the div
<ul>
<li class="menuContainer">
<a class="top" href="#">Menu</a>
<div class="sub">
<a class="top" href="google.com">item in dropdown menu with valid url when clicked here div.sub should stay close</a>
</div>
</li>
<li class="menuContainer">
<a class="top" href="#">Menu</a>
<div class="sub">
<a class="top" href="#">item in dropdown menu when clicked here div.sub should stay open</a>
</div>
</li>
$(document).ready(function(){
$('li.menuContainer').each(function() {
var $dropdown = $(this);
$("a.top", $dropdown).click(function(e) {
e.preventDefault();
$div = $("div.sub", $dropdown);
$div.toggle();
$("li.menuContainer div.sub").not($div).hide();
$( "#effect" ).hide();
return false;
});
$("li.menuContainer div.sub").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function (){
$("li.menuContainer div.sub").hide();
});
});
what i want to do is to stop closing div when clicked inside of it. Any help please?
I think you are looking for e.stopPropagation();. Use it in an event on the child items.
This will stop the event from propagating to the parent div.
In your code the problem is inside the following function, now corrected:
$('html').click(function(event){
var ele = event.target.tagName + '.' + event.target.className;
if (ele != 'DIV.sub') {
$("li.menuContainer div.sub").hide();
}
});
Like you can see now when you click on whatever html element a check is done to prevent the undesired action.
use this code
$("li.menuContainer > a.top").click(function(e) {
e.preventDefault();
$div = $(this).next("div.sub");
$("li.menuContainer div.sub").not($div).slideUp();
$div.slideDown();
});
instead of
$('li.menuContainer').each(function() {
var $dropdown = $(this);
$("a.top", $dropdown).click(function(e) {
e.preventDefault();
$div = $("div.sub", $dropdown);
$div.toggle();
$("li.menuContainer div.sub").not($div).hide();
return false;
});
});
and about
$('html').click(function(){
$("li.menuContainer div.sub").hide();
});
you can use
$(window).on('click',function(e){
if (!$("li.menuContainer").is(e.target) // if the target of the click isn't the container...
&& $("li.menuContainer").has(e.target).length === 0) // ... nor a descendant of the container
{
$("li.menuContainer div.sub").slideUp();
}
});
Working Demo
Update:
$("div.sub > a.top").on('click',function(e) {
e.preventDefault(); // prevent page from reloading
e.stopPropagation(); // prevent parent click
alert('Here We Are :)');
});
Working Demo
I have this html structure
Click me
<div class="dp_div" style="display: none;">
this is the div content
</div>
I want to show the hidden div that has a class of "dp_div" when click on a link that has a class of "dp" and then if click to other element (if the current target click element is not '.dp' and '.dp_div'), the .dp_div will be hide, on the contrary, when click either .dp_div or the .dp then do not hide.
This is what I tried so far but sadly not working.
$(document).on('click', function(event) {
if ($(event.target).hasClass("dp") || $(event.target).hasClass("dp_div"))
{
alert('either .dp or .dp_div is click!!');
} else {
alert("not .dp or .dp_div is click");
}
});
You code snippet is missing a paranthesis
$(document).on('click', function(event) {
if ($(event.target).hasClass("dp") || $(event.target).hasClass("dp_div"))
{
alert('either .dp or .dp_div is click!!');
} else {
alert("not .dp or .dp_div is click");
}
});
Please see the fiddle here for a demo
This code will show the element if the HREF (link) is clicked on:
$(document).on('click', function(event) {
if ($(event.target).hasClass("dp") || $(event.target).hasClass("dp_div")){
$('.dp_div').fadeIn();
} else {
alert("not .dp or .dp_div is click");
}
});
http://jsfiddle.net/L0LmLquj/
You may use:
$('.dp_div').show();
or
$('.dp_div').fadeIn();
or even:
$('.dp_div').toggle(); if you wish to toggle the element upon clickation.
I have a sample code
On Html:
<div id="item-1-desc">ABC</div>
<div id="item-2-desc">DEF</div>
<div id="item-3-desc">XYZ</div>
And jquery:
$('div[id^=item-][id$=-desc]').hide().before('More');
$('a#toggle-desc').click(function (e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('see-more');
if($this.hasClass('see-more')){
$this.text('More');
} else {
$this.text('Close');
}
$('div[id^=item-][id$=-desc]').slideToggle(200);
});
When I click on more, it open all div(http://jsfiddle.net/3v25guz6). How to click only show a item desc ?
You have to target only the div which is next sibling of the clicked a so
$(this).next('div').slideToggle(200);
Also, id of an element must be unique, so for the dynamically added elements use the class to register the click handler
$('div[id^=item-][id$=-desc]').hide().before('More');
$('.see-more').click(function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('see-more');
$this.text($this.hasClass('see-more') ? 'More' : 'Close');
$(this).next('div[id^=item-][id$=-desc]').slideToggle(200);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="item-1-desc">ABC</div>
<div id="item-2-desc">DEF</div>
<div id="item-3-desc">XYZ</div>
http://jsfiddle.net/3v25guz6/2/
$('div[id^=item-][id$=-desc]').hide().before('More');
$('a#toggle-desc').click(function (e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('see-more');
if ($this.hasClass('see-more')) {
$this.text('More');
} else {
$this.text('Close');
}
$this.next().slideToggle(200);
});