jQuery: Clicking anywhere but on a particular A tag

[cancer10]

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.

[webdev1958]

Any neat solution for this?

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>

[centered effect]

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>

[cancer10]

Hi Guys

Thanks for your replies.

I will try out these examples.

[cancer10]

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 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.

[webdev1958]

The non jquery demo code works fine.

[cancer10]

Yea but its too lengthy

[webdev1958]

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

[centered effect]

Untested, but I don't see why it wouldn't work:

$('*:not(a.mylink)').click(function() {
	alert('Alerting!');
});