Develop Reference

How do I select a class but not its inside element?

Say I have
<div id="mydiv">
<div class="myclass">
<span class="otherclass"></span>
and many other classes...
</div>
</div>
I want to capture the click event on .mydiv but not inside .myclass.
I tried .mydiv:not(.myclass) but it doesn't seem to work. I think it's because I might be clicking on the otherclass so the :not(.myclass) is not working. How can I get the area I want to get? Thanks!

make #mydiv clickable, do whatever you wish, and stop event propagation from .myclass, so the event will not bubbleup from myclass to mydiv
$('#mydiv').click(function(){
// do anything
})
// stop event propagation
$('.myclass').click(function(e){
e.stopPropagation();
})

You can click on mydiv id and write your code in that function and on .myclass click event you simply write return false to stop further execution of function.
$('#mydiv').click(function(){
// stuff your code here
});
//Use `return false` instead of `e.stopPropagation();`
$('.myclass').click(function(e){
return false;
})
e.stopPropagation() is dangerous please read Documentation

Calling .off() will remove an event handler
$("#mydiv").on('click', function () {
alert("You clicked mydiv");
});
$(".myclass").off('click', function () {
});
or like this
$(".myclass").off();
JS FIDDLE

Trigger click event on "a href" element

I am trying to click a href element on my html website. Problem is that click event is not triggered
CODE:
HTML CODE:
<div class="button" id="info" ></div>
<ul id="game-options">
<li>HELP</li>
</ul>
Function that clicks a href element:
$('#info').bind('click', function(e) {
alert ("button click triggered");
// This is what I tried so fat
//$('#SHOW_HELP').trigger('click');
//$('#SHOW_HELP').dispatchEvent(new Event('click'));
$('#SHOW_HELP').click();
});

The click event is triggered, but you haven't bound a click handler so nothing will happen. If you want to simulate clicking the link you need to use the dom click method, ie. $('#SHOW_HELP')[0].click();

$('#SHOW_HELP').bind('click', function(e) {
alert ("button click triggered");
// This is what I tried so fat
//$('#SHOW_HELP').trigger('click');
//$('#SHOW_HELP').dispatchEvent(new Event('click'));
});
Demo
Hope it helps you

Alternatively, you can update the button's click event to change the window.location in JavaScript.
Try this:
$(function(){
$('#info').click(function(){
window.location = $('#SHOW_HELP').attr('href');
});
});

It's actually working.
Here a JSFiddle example: http://jsfiddle.net/rZbk7/
$('#info').on('click', function(e) {
alert("info triggered");
$('#show-help').click();
});
$('#show-help').on('click', function(e) {
alert("show-help triggered");
});
(not a big fun of snake case, I changed the name SHOW_HELP to show-help)
Click event is triggered. The problem is that you didn't define any action.

Prevent click on outer li while clicking on inner link

I have some lis including a links as below
<li>
<span>SomeText</span>
<a href='someurl' class='entityDetailModal'>sometext</a>
</li>
I am using a third party library ('LightGallery') that adds click event on Li, and by Jquery I have add click event to the links to show a dialog.
The problem is when I click on link both click event will be fired,
my click event handler is
$('body').on("click", 'a.entityDetailModal', function (event) {
event.preventDefault();
event.stopPropagation();
loadDialog(this, event, '#mainContainer', true, true, false);
return false;
});
I tried event.stopPropagation() and event.preventDefault(); and return false; in link onclick event handler but they don't work.
Sample:http://jsfiddle.net/HuKab/30/
How can I overcome this?
Update
It seems the problem is the way I add click event handler,
using this way it seems that everything is ok
$('a.entityDetailModal').click(function (event) {
event.preventDefault();
event.stopPropagation();
loadDialog(this, event, '#mainContainer', true, true, false);
return false;
});
Update 2
Thanks #Huangism, this post stackoverflow.com/questions/16492254/pros-and-cons-of-using-e-stoppropagation-to-prevent-event-bubbling is explaining the reason.

Use stopPropagation(); in child element
$("li").click(function (e) {
alert("li");
});
$("a").click(function (e) {
e.preventDefault(); // stop the default action if u need
e.stopPropagation();
alert("a");
});
DEMO

It is not very clear to me what your problem really is. If you simply want to get rid of the click on the li tag you may use .unbind() from jQuery (see: http://api.jquery.com/unbind/). You should end up with only your click event.
Another thing that might help is to use something like:
$("a").on('click.myContext', function(event) {
//Your action goes here
}
This way you can have parallel events and turn them on with $("a").on('click.myContext') and off with $("a").off('click.myContext')
Edit: Use:
$("a").on('click.myContext',function (e) {
e.stopPropagation();
alert("a");
});
see working example: http://jsfiddle.net/bGBLz/4/

Excluding an element from jQuery selection

I'm trying to get a .click() event to work on a div.content except if clicked on something with a specific class, say, .noclick. Example html:
<div class="content">
<a href="#" class="noclick">
</div>
Doing this doesn't work because the <a> tag is not technically in the selection:
$('.content').not('.noclick').click(function(){/*blah*/});
How can I get the click function to work if I click anywhere on .content except something with class .noclick?

You'd have to exclude them from within the callback:
$('.content').click(function(e) {
if ($(e.target).hasClass('noclick')) return;
});
Or stop the event from leaving those elements:
$('.noclick').click(function(e) {
e.stopPropagation();
});
I would go with the second one. You can just drop it and your current code (minus the .not()) will work.

$('.content').click(function(event) {
// ...
}).find('.noclick').click(function(event) {
event.stopPropagation();
});

$('.content').click(function(e){
if(!$(e.target).is('.noclick')){
// Handle click event
}
});

$('.content').
on('click', '.noclick', function(){return false;}).
click(function(){alert("click")})
cancels clicks on '.noclick', yet fires clicks elsewhere
http://jsfiddle.net/FshCn/

How to prevent default link behavior if element inside of link is clicked

I have a link that looks like this:
<a href="page.html" class="myLink">
Link text
<div class="toggle">x</div>
</a>
When they click on the x in toggle I want to prevent the link from navigating, but if they do click on the Link Text I want the link to navigate.
I tried this:
$('.toggle').click(function(event) { $(this).parents('a').preventDefault(); });
But it didn't seem to work.

To stop propagation from the clicked element to the outer a, you'd have to call stopPropagation. But here you can simply return false ( which both stops propagation and prevents default behavior) :
$('.toggle').click(function(event) {
// do interesting things
return false
});

It is the event not the element that you need to fire the preventDefault() method upon.
$('.toggle').click(function (event) {
event.preventDefault();
});
This will stop the event from triggering but not propagating up the document.
$('.toggle').click(function (event) {
event.stopPropagation();
});
Is it's counterpart.