We Keep Coding

jQuery detect whether an element has been linked to

I want to attach a jQuery event handler to a <div> element such that whenever a link is clicked which points to this <div>, that handler is activated and the associated function is executed – regardless of the location of the link (same page, other page, other site) pointing to the <div> .
$("div#mydiv").on("linked_to", function(){ //is there a "linked_to" event?
//do something about it
});
Is this possible? Can scrollIntoView() be used?

What you want is quite specific and borderline undoable. I think your best bet is to detect a hash change in the URL and act accordingly.
You aren't gonna be able to detect that div#mydiv itself was clicked, but detecting the hash #mydiv comes pretty close to it.
You would use something like:
window.onhashchange = function() {
if (window.location.hash === '#mydiv') { // here you check if it was `#mydiv`
alert('hey! are you after mydiv?!')
}
}
Check an example here: http://output.jsbin.com/pikifov - click the link and notice how the hash from the URL changes.
Source for the JSBin above here.
Full code:
<div id="mydiv">mydiv</div>
<hr>
Click to go to mydiv
<script>
window.onhashchange = function() {
if (window.location.hash === '#mydiv') {
alert('hey! are you after mydiv?!')
}
}
</script>

How do I detect the same anchor link clicked multiple times on the page?

I have a question for you guys.
Lets say I have an internal anchor link on the same page as in http://jquery.com/#myAnchor
Now if I click on the anchor, then the url will be http://jquery.com/#myAnchor
And if I click on the anchor again, the url will again be http://jquery.com/#myAnchor
aka, the url actually does not change .. just the link clicked twice on the page. How do I detect that the internal anchor has been clicked again?
For example
<a name="myAnchor"></a>
If the above anchor link is on the same page, then how do I detect this hashChange.
Actually I have function that detects hashChange on a page as in below. but the code fails for this one particular codition
$(window).on('load hashchange', function () {

use data- attributes. When user clicks the anchor link, just increment the data attribute.
$(document).ready(function(){
$('a.myLink') .click(function(e) {
e.prevenDefault();
var count = $(this).attr('data-clicked');
count = parseInt(count) + 1;
$(this).attr('data-clicked', count);
});
});
<a class="myLink" data-clicked="0">Anchor Tag</a>

You can use event delegation to track the clicks, something like
$(document).on('click', '[href="#myAnchor"]', function(){
//do whatever you want here
});
Also named anchors are obsolete, you should be using ids instead.
<section id="myAnchor">
</section>

Add any class when user click on anchor tag . User click again on that ancor tag check hasClass()
Please check Below Jsfiddle enter code here
http://jsfiddle.net/upardhi/2krq8Lsy/

You can check like this also
$(document).on('click', 'a', function() {
var link = $(this).attr('href'),
currentLink = window.location.href;
if (link == currentLink)
return false;
else
//your conditions
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a name="myAnchor" href="http://jquery.com/#myAnchor">Test</a>

Jquery not delaying properly when clicking on <a> tag

I have a div I want to show when I click an <a> tag, I want to wait for like 10 seconds before redirecting, but it just shows me the div and redirects without waiting.
Html code:
<a class="clickHereToDisplay" href="http://www.google.com">Click here to go</a>"
<div class="hiddenDiv"></div>
Jquery code:
<script>
$(document).ready(function(){
window.setTimeout(function(){
$(".clickHereToDisplay").click(function(){
$('.hiddenDiv').text('THE TEXT I WANT TO DISPLAY WHEN THE HREF IS CLICKED');
$('.hiddenDiv').show();
});
}),10000;
});
</script>

The problem is the browser is using the href to immediately redirect. You want something like this:
<a class="clickHereToDisplay" href="#" onclick="timedRedirect()">Click here to go</a>"
<div class="hiddenDiv"></div>
Then your javascript:
var timedRedirect = function() {
$('.hiddenDiv').text('THE TEXT I WANT TO DISPLAY WHEN THE HREF IS CLICKED');
$('.hiddenDiv').show();
window.setTimeout(function(){
window.location.href = "http://www.google.com"
}),10000);
};
One other note; there is nothing preventing the user from doing other stuff in the ensuing 10 seconds, so make sure you handle user flows you don't want occurring (like other event handlers, etc).

You need to use the timeout in the click handler.
In the click handler first you need to show the hidden div and the use a timer to delay the redirection for which you need to prevent the default action of the click and then manually set the location in the timeout handler.
$(document).ready(function () {
$(".clickHereToDisplay").click(function (e) {
e.preventDefault();
$('.hiddenDiv').text('THE TEXT I WANT TO DISPLAY WHEN THE HREF IS CLICKED').show();
window.setTimeout(function () {
window.location = e.currentTarget.href;
}, 10000);
});
});

Click Function Conflict in jQuery

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

Jquery how to call click on a link?

I have a link with the id:
nyhedsklik
I this function that gets triggered when clicking on the link:
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
I have just taken a part of the function for an example....
Now I want to make a click on the link with Jquery. Just like a user would do I have tried this which does not work:
<script>
$(document).ready(function() {
$('#nyhedsklik').trigger("click");
});
</script>

If you use the click() method with no parameters, Jquery will simulate a click...
$('#nyhedsklik').click();

Make sure that before you trigger click event on the anchor the event is attached to it.
$(document).ready(function() {
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
...
});
$('#nyhedsklik').trigger("click");
//Alternatively you can just call click method
$('#nyhedsklik').click();
});

You can use $("selector").click().
http://api.jquery.com/click/

I see no errors in code posted, there should be a problem somewhere else; this demo works fine (it simulates click with a 5 seconds delay).

Works for me.
http://jsfiddle.net/sAcje/