I am trying to add a handler for the click function to redirect to some link. I have a parent div which has a click handler to redirect to google.com and inside the parent div, I have a subdiv with an anchor tag pointing to yahoo.com. If I click the sub div containing the link to yahoo.com, it currently goes to google.com. How do I overcome this problem?
I have created a JSFIDDLE. Here is the HTML code:
<div class="maindiv">
<div class="subdiv">
Click Me
</div>
</div>
and the Javascript code:
jQuery('.maindiv').click(function() {
window.open('http://google.com');
});
I want that clicking the parent div should take the user to google.com but any link inside the parent div should take the user to the appropriate link.
Thanks!
Here is the updated code: http://jsfiddle.net/c2XJf/23/
Specifically, you need to stop propagation of the click event on the anchor tag like this:
$('.subdiv a').click(function(event){
event.stopPropagation();
});
and if you want to open the link of the anchor tag in a new tab/window, add a target attribute to your HTML like this:
Click Me
Jquery Code:
$('.subdiv a').click(function(event){
event.stopPropagation();
window.open('http://yahoo.com');
});
$('.subdiv').click(function(event){
window.open('http://yahoo.com');
});
$('.maindiv').click(function(event){
window.open('http://google.com');
});
and you can set width style for subdiv to show redirects perfectly.
Updated code is:
http://jsfiddle.net/c2XJf/22/
check if target div is the current div..
try this
jQuery('.maindiv').click(function(e) {
if(e.target == this){
window.open('http://google.com');
}
});
$('a').click(function(){window.open('http://yahoo.com');});
Html Code:
<div class="maindiv">
<div class="subdiv">
Click Me
</div>
</div>
Jquery Code:
jQuery('.maindiv').click(function() {
window.open('http://google.com');
});
jQuery('.maindiv').find('a').click(function() {
window.open('http://yahoo.com');
});
You can solve this problem simply checking the tagName of the clicked element and redirecting to the corresponding page.
jQuery('.maindiv').click(function(event) {
var target = $(event.target);
//checks if a tag has been clicked or not
if(!target.is('a')){
window.open('http://google.com');
}
else{
window.open("http://yahoo.com");
}
});
Demo
Related
I'm currently working with this code, anytime I click on the div it goes to the url...
HTML
<div class='gotoPost' data-href='post?i=24'>[text]</div>
JQUERY
$(function() {
toUrl = function(){
var GoToUrl = $(this).data('href');
var redirect = GoToUrl;
window.location = redirect;
}
});
$(function() {$(".gotoPost").on('click',toUrl);});
PROBLEM
Now I want to add a absolute-positioned div at the top of the container, but anytime I click on it. (to show a Lightbox) it goes to the url...how do I prevent it from going to the url? I want when clicked the child div,it doesnt go to the url.
<div class='gotoPost' data-href='post?i=24'>[text]
<div class=ShowLightBox>3</div>
</div>
So Your question is..
<div class='gotoPost' data-href='post?i=24'>
[text]
<div class=ShowLightBox>3</div>
</div>
If you click 'showlightbox' div, it doesn't redirect to other page,
but when you click other area of 'gotoPost', then you want to redirect page. right?
Solution
So here's the solution:
$(function() {
toUrl = function(e){
if (e.target.classList.contains('gotoPost')) {
var GoToUrl = $(this).data('href');
var redirect = GoToUrl;
window.location = redirect;
}
}
});
$(function() {$(".gotoPost").on('click', toUrl);});
If you use call-back function with JS, when event happends it will call call-back function with 'EVENT' object, which contains 'e.target' - HTML Element you've click.
the code above check if your click event is targeting 'gotoPost' directly not inside HTML element. So this would work for you! :)
ps. Checkout "Event Delegation with JavaScript".
You need to prevent the click event on .ShowLightBox from propagating. For example:
$('.ShowLightBox').on('click', function(e){
e.stopPropagation();
// Open light box
});
Ref: https://api.jquery.com/event.stoppropagation/
I am trying to show a div on click on an anchor, the issue is the anchor is inside an element and the div that needs to be shown is outside of this element. There are multiple divs of the same class on the page so I only want to show the associated one.
The markup is:
<div class="wrapper">
<div class="trigger">
Change
</div>
<div class="content">
<p>Content to be shown when Change is clicked</p>
</div>
</div>
Is that what you want to do? (fiddle)
// dom ready
$(function() {
$('a.change').on('click', function() {
// wrapper div
$(this).parent()
.next() // .content div
.show();
return false; // prevent the link to be followed
});
});
With jQuery you can do it like this:
$('a.change').click(function(e) {
e.preventDefault();
$(this).parent().next().toggle();
});
jsFiddle example
is this what you mean?
$(".content").hide();
$("a.change").click(function(){
$(".content",$(this).closest(".wrapper")).show();
});
Live demo :
http://jsfiddle.net/dfkge/
Got to the parent and get the correct div e.g.
$('a.change').click(function(event){
event.preventDefault();
$(this).parents('.wrapper').children('.content').show()
}
This way you don't have to worry how deeply embedded anchor is, or where is content (before, after) in relation to anchor
Added a jsFiddle, showing divs with different structures, working with same code
http://jsfiddle.net/NWqcq/11/
I asked a precursor to this question here:
Click link in DIV and show PHP/HTML in separate DIV
Then, after I removed the first script shown below, I was able to get the second script to work. I revised my question, but it appears to have gone silent. So I have a slightly modified question.
What is the conflict between the 2 scripts below and how can I modify them to work in tandem? Basically I want to be able to click anywhere in the DIV (".side_items") and have the child anchor links open in a separate DIV ("#main_content")
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$(".side_items").click(function(){
window.location=$(this).find("a").attr("href");
return false;
})
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".side_items a").click(function(e){
e.preventDefault();
$("#main_content").load($(this).attr("href"));
});
});
</script>
HTML: (slightly simplified)
<div id="main_content">
</div>
<div id="right_side">
<div class="side_items">
<a href="content.html">
<img src="images/examplethumb.png" /><br />
Content</a>
</div>
</div>
Both scripts work independently to achieve their individual desired result.
This will do it:
$(document).ready(function(){
$(".side_items").click(function(){
$("#main_content").load($(this).find("a").attr("href"));
return false;
})
});
Breaking it down:
$(".side_items").click(fn);
Find all the elements with a class of side_items and assign a click event handler (fn) to them. Each time one of these elements is clicked, fn is executed with the context of the element. In the discarded code you were using the selector .side_items a, which meant the click handler was only bound to the links inside the div, not the div itself.
$(this).find("a").attr("href")
Find all the links that are contained within the current element (this), and get the value of the href attribute from the first element found. In the discarded code the context (this) was a link. Since our handler is now bound to the containing div, the context is also the div. To get the link you have to find it.
$("#main_content").load(href);
Find the element with an id of main_content and load the content found at href into it. In the discarded code you were setting location.href, which causes the page to navigate away.
I think your issue is that you're trying to assign the $().ready(..) handler twice.
Try combing scripts like this
<script type="text/javascript">
var change_location = function(){
$(".side_items").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
}
var load_location = function(){
$(".side_items a").click(function(e){
e.preventDefault();
$("#main_content").load($(this).attr("href"));
});
}
$().ready(function(){
change_location();
load_function();
});
</script>
Hope that helps
I have a div like this:
<article id="#pippo">blablabla</article>
that I have hided with jQuery
$('article').hide();
now I'd like to have a link menu that show a specific article id when it's clicked for example.
If I click on link:
LINK PIPPO
I'd like that the article named #pippo is shown
if I click on link that point to #pluto, an article with id #pluto have to be shown...
how can I do this in jQuery?
If you want this to work for every <a> tag on your page then you can do the following
$('a').click(function (e) {
var id = $(this).attr('href');
$(id).show();
// Don't follow the link
e.preventDefault();
});
More likely though you want this to work on a subset of <a> on the page. If so you can distinguish them by putting a class in the link and changing your selector as appropriate
HTML:
LINK PIPPO
JavaScript:
$('a.fakeLink').click(function (e) {
var id = $(this).attr('href');
$(id).show();
// Don't follow the link
e.preventDefault();
});
Try this
$("a").click(function(){
$(this.href).show();
return false;
});
First add a class to identify the anchor tags that need this functionality, eg. 'visibility_toggle'. Then add a handler that uses the href attribute to work out which div to show/hide.
$('a.visibility_toggle').click(function(e) {
$(this.href).toggle();
e.preventDefault();
});
I have a div containing some content, in which there are some links. The div itself watches for the click event so it can make the content editable. However, I want the user to be able to click the links inside of the div and have it navigate to the linked page rather than edit the content (clicking anywhere else in the div should edit the content though). How do I achieve this?
Code example:
<div id="content">
Here's a link.
</div>
// jQuery Javascript:
$("#content").click(function() {
// Make content editable
});
(Clicking on the link shouldn't make the content editable, and instead should direct the page to google.com.)
Edit: I'm using my own code to make the content editable (switching out the div with a text area, that sort of thing).
Check the event target and return true
$("#content").click(function(e) {
if ($(e.target).is('a')) {
return true;
}
});
Not tested
The thinking behind this is to bail-out early from the handler and, by returning true, allow the browser to handle the event the usual way.
One error you have is that you are using content as a class in your HTML, but as an ID in your jQuery. So you should change your HTML to id="content" (assuming no other elements on your page already have that id.
Your Javascript can look like:
$("#content").click(function(){
this.setAttribute('contenteditable', 'true');
$(this).focus();
}).blur(function(){
this.setAttribute('contenteditable', 'false');
});
$("#content a").click(function(e){
e.stopPropagation();
});
Here's a JSFiddle: http://jsfiddle.net/q77Bs/
example
use event.stopPropagation()
// jQuery Javascript:
$(".content").click(function(e) {
// make content editable
});
$('.content a').click(function(e) {
e.stopPropagation();
});
You could change the z-index of the link to be greater than that of the div (not sure if that will work), or you can place each link inside another div with a higher zindex than the main div. This will prevent clicks from registering on the primary div, so make sure the secondary divs are correctly sized so as not to prevent the editing functionality
$('#content a ').live("click", function(event){
event.stopPropagation();
});
this will do the trick