Develop Reference

How to fix other element reset to default when using jquery click function

I have an element with fixed sidebar with onclick function. When it is clicked at bottom page, the other element as content back to top of page. How I can stop this problem?
Here is my jquery function :
$(document).ready(function(){
$("#sidebarCollapse").on('click', function(e){
e.stopPropagation();
$('#sidebar').toggleClass('show-side-nav');
e.stopPropagation();
$('#user').toggleClass('d-none');
e.stopPropagation();
$('#navbar').toggleClass('show-side-nav');
});
Regards!

Guessing it's either a button which will reload the page, or <a href="#"> which will go to top. You need to use preventDefault(). You may not even need stopPropagation() in this instance, but if you do you only need it once. Also when you're toggling the same class on two elements, you can select them together.
$("#sidebarCollapse").on('click', function(e){
e.preventDefault();
e.stopPropagation();
$('#sidebar, #navbar').toggleClass('show-side-nav');
$('#user').toggleClass('d-none');
});

jQuery: hide element after it has been shown?

I have this strange scenario that I cannot understand.
Basically, I show an element using jquery show(); which works fine.
But I need to hide() the same element using the hide(); function but the element stays visible and the hide() doesn't work.
Can someone please advice on this?
Here is a working FIDDLE.
This is my code:
$(document).on('click','.buildExMain', function(e){
$(this).children('.buildExDrop').show();
});
$(document).on('click','.pSelection', function(e){
$('.buildExDrop').hide();
});

#billyonecan was spot on, adding e.stopPropagation(); after your $('.buildExDrop').hide(); fixes this.
This allows the hide click event for the sub-elements .pSelection to not bubble up to the show click event of the .buildExDrop element.

Your click to hide also triggers the click to show. this works
$(function(){
$(document).on('click','.buildExMain span', function(e){
$('.buildExDrop').show();
});
$(".buildExMain").on('click','.pSelection', function(){
$('.buildExDrop').hide();
});
});

jquery this animate this element without id

In my HTML code I have a div. This div includes some warnings to the users. Warnings are wrapped inside div elements with no ID. If user clicks on close button, it should remove the warning div.
<div id="alarmbox" align="center">
<div>this is warning 1<button onclick="remove_div_of_this_button(this);">x</button></div>
<div>this is warning 2<button onclick="remove_div_of_this_button(this);">x</button></div>
</div>
and this is my JS code:
function remove_div_of_this_button(thisbutton)
{
thisbutton.parentNode.parentNode.removeChild(thisbutton.parentNode);
}
It works fine. However, removing an element is better to be animated instead of sudden remove. If I want to manipulate JS only, how to remove the div with jquery? Is it possible to identify thisbutton in jquery since $(thisbutton) should not work here?

Separate out js from your html and use click event with jquery.
With fadeOut
$(function(){
$('#alarmbox button').click(function () {
$(this).closest('div').fadeOut(1000,function(){
$(this).remove();
});
});
});
Demo
Or try slideUp
Demo2

Like this maybe?
function remove_div_of_this_button(thisbutton)
{
$(thisbutton).parent().fadeOut(function() {
$(this).remove();
});
}

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/

Prevent icon inside disabled button from triggering click?

Trying to figure out proper way to make a click event not fire on the icon of a disabled link. The problem is when you click the Icon, it triggers the click event. I need the selector to include child objects(I think) so that clicking them triggers the event whenever the link is enabled, but it needs to exclude the children when the parent is disabled.
Links get disabled attribute set dynamically AFTER page load. That's why I'm using .on
Demo here:(New link, forgot to set link to disabled)
http://jsfiddle.net/f5Ytj/9/
<div class="container">
<div class="hero-unit">
<h1>Bootstrap jsFiddle Skeleton</h1>
<p>Fork this fiddle to test your Bootstrap stuff.</p>
<p>
<a class="btn" disabled>
<i class="icon-file"></i>
Test
</a>
</p>
</div>
</diV>​
$('.btn').on('click', ':not([disabled])', function () { alert("test"); });​
Update:
I feel like I'm not using .on right, because it doesn't take the $('.btn') into account, only searching child events. So I find myself doing things like $('someParentElement').on or $('body').on, one being more difficult to maintain because it assumes the elements appear in a certain context(someone moves the link and now the javascript breaks) and the second method I think is inefficient.
Here is a second example that works properly in both enabled/disabled scenarios, but I feel like having to first select the parent element is really bad, because the event will break if someone rearranges the page layout:
http://jsfiddle.net/f5Ytj/32/

Don't use event delegation if you only want to listen for clicks on the .btn element itself:
$('.btn').on('click', function() {
if (!this.hasAttribute("disabled"))
alert("test");
});​
If you'd use event delegation, the button would need to be the matching element:
$(someParent).on('click', '.btn:not([disabled])', function(e) {
alert('test!!');
});​
Demo
Or use a true button, which can really be disabled:
<button class="btn" [disabled]><span class="file-icon" /> Test</button>
Demo, disabled.
Here, no click event will fire at all when disabled, because it's a proper form element instead of a simple anchor. Just use
$('.btn').on('click', function() {
if (!this.disabled) // check actually not needed
this.diabled = true;
var that = this;
// async action:
setTimeout(function() {
that.disabled = false;
}, 1000);
});​

.on('click', ':not([disabled])'
^ This means that, since the icon is a child of the button ".btn", and it is not disabled, the function will execute.
Either disable the icon, also, or apply the event listener only to the <a> tag that is your button, or use e.stopPropagation();
I would suggest using e.stopPropagation();, this should prevent the icon from responding to the click.
That doesn't seem to work for me ^
Disabling the icon, however, does.

I would prefer to add the event using delegation here as you are trying to base the event based on the attributes of the element.
You can add a check condition to see if you want to run the code or not.
$('.container').on('click', '.btn', function() {
if( $(this).attr('disabled') !== 'disabled'){
alert('test!!');
}
});​
Check Fiddle

You're not using the selector properly.
$('.btn').not('[disabled]').on('click', function () {
alert("test");
});​
See it live here.
Edit:
$('.container').on('click', '.btn:not([disabled])', function () {
alert("test");
});​

I think what you need is:
e.stopPropagation();
See: http://api.jquery.com/event.stopPropagation/

Basically something like the following should work
$('.icon-file').on('click', function(event){event.stopPropagation();});
You may want to add some logic to only stop bubbling the event when the button ist disabled.
Update:
not sure, but this selector should work:
$('.btn:disabled .icon-file')