Hi
I have a question in jQuery.
I have a webpage with lots of links, buttons, text etc. The page also has an <A class=“mylink” HREF=“#”>Click here</a> tag.
What exactly I want is, if I click anywhere on the page, button, text or any other <A></A> tag on that page except the A tag that has the class=“mylink”, an alert() should popup.
I tried the following but I still see the alert when I click on the <A class=“mylink” HREF=“#”>Click here</a> tag.
<script>
$(document).ready(function(){
$(document).click(function(){
alert(123);
});
});
</script>
Any neat solution for this?
Thanks in advance.
system
November 8, 2011, 10:58pm
2
You can do this without jquery.
With this demo code clicking anywhere on “myDiv” except on it’s 2 child <p>'s will fire an alert(). It’s only a couple of minor tweaks to make it suit your situation.
<script type="text/javascript">
window.onload=function(){
var oP1 = document.getElementById('myP1');
var oP2 = document.getElementById('myP2');
stopBubbling(oP1);
stopBubbling(oP2);
function stopBubbling(childDiv){
if(childDiv && childDiv.addEventListener){
childDiv.addEventListener('click',function(event){
event.cancelBubble=true;
if(event.stopPropagation) event.stopPropagation();
},false);
}else if(childDiv && childDiv.attachEvent){
childDiv.attachEvent('onclick',function(event){
event.cancelBubble=true;
if(event.stopPropagation) event.stopPropagation();
}
);
}else{
childDiv.onclick=function(event){
event.cancelBubble=true;
if(event.stopPropagation) event.stopPropagation();
}
}
}
}
</script>
<div id="myDiv" onclick="alert('div clicked');">
div 1
<p id="myP1">para 1</p>
<p id="myP2">para 2</p>
more div 1
</div>
For jQuery:
<a href="#" class="noAlert">Click</a>
<a href="#" class="noAlert">Click</a>
<a href="#" class="noAlert">Click</a>
<a href="#" class="mylink">I haz no alert</a>
<a href="#">Click</a>
<a href="#">Click</a>
<a href="#" class="mylink">I haz no alert either</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$('a:not(.mylink)').click(function() {
alert('Alerting!');
});
</script>
Hi Guys
Thanks for your replies.
I will try out these examples.
Hi Again
I tried your example, its alerting only when I click on the target A tag. It should alert only if not clicked on the A tag. I am using the following example:
<script src="jquery.js"></script>
<script>
$(function () {
$('a:not(.mylink)').click(function() {
alert('Alerting!');
});
});
</script>
<A class="mylink" HREF="#">Click here</a> tag.
<A class="mylink2" HREF="#">Click here</a> tag.
system
November 9, 2011, 5:45am
6
The non jquery demo code works fine.
system
November 9, 2011, 5:51am
8
no problem, but at least it works :).
If you look at the “back end” jquery code, you’ll probably find that it’s even lengthier.
In the mean time, hopefully someone else will come along before too long to help you your jquery solution
Untested, but I don’t see why it wouldn’t work:
$('*:not(a.mylink)').click(function() {
alert('Alerting!');
});