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');
});

Prevent redirect when clicking on anchors child element

I have a button that's located in an anchor, and that button has some logic that's triggerd by clicking on it.
The problem is that whenever I click on that button, the app get's redirected due the anchor parent element.
<a href="foo" id="bar">
<span id="button">click me</span>
</a>
I tried using .stopPropagation() like it's mentioned in this post, however it doesn't work.
I tried:
$('#button').on('click', function(e) {
e.stopPropagation();
})
Here's the fiddle.
However, if I replace the parent anchor with a div, then it works - JSFiddle
Am I doing something wrong?
Update: I know I can prevent redirecting with e.preventDefault(), however, I want when I click on the parent element to redirect, and when I click on the button not to redirect and start doing my JS functions (open modal).

Try this:
$('#bar').on('click', function(e) {
if( $(e.target).is('#button') ) {
e.preventDefault();
//your logic for the button comes here
}
//Everything else within the ancho will cause redirection***
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="foo" id="bar">OK
<span id="button">click me</span>
</a>

Try:
e.preventDefault();
Fiddle: http://jsfiddle.net/hfyy10a8/3/

You should use e.preventDefault(); on links:
$('#bar').on('click', function(e) {
e.preventDefault();
});
You can also add it on your example, all together:
$('#button').on('click', function(e) {
e.stopPropagation();
e.preventDefault();
});

use return false:
$('#button').on('click', function (e) {
//some logic
$(this).css('color', 'red');
return false;
});
The reason why stopPropagation wont work is because it will prevent event handlers from running, not native behavior.

Try to use e.preventDefault() instead:
$('#button').on('click', function (e) {
e.preventDefault();
});
See this explanation for why e.stopPropagation() is not working.

I know this question already has an answer but however, I made mine work by returning false on the "onclick" attribute of the child element.
<a href="https://google.com">
<button onclick="return doTask()">Do not navigate</button>
</a>
function doTask(){
//... write action
return false; <- This prevents the click action from bubbling up to parent tag
}

Using "on" for response for desired elements only:

JS Fiddle Link
I am dynamically adding some elements and my div looks like:
<div class="knock" href="#">
<!-- Do Something if links are not clicked -->
Google
Facebook
</div>
And my on script is:
$(".knock").on("click", function(){
console.log("Link not clicked");
alert("Link not Clicked");
});
My Problem, I do not want to fire the alert when the links are clicked. Is there a way out?

You can write anchor tag event and stop event Propagation of the event to upper DOM elements so that alert only comes up when the div is actually clicked, but not when some anchor tag inside div is clicked:
$(".knock").on('click',"a",function(event){
event.stopPropagation();
})
FIDDLE:
http://jsfiddle.net/hbac7vbh/2/
event.stopPropagation:
The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.
See details here on jquery official page

Just determine if the a is clicked based on the event that is passed.
Updated Example
$(".knock").on("click", function(e){
if(!$(e.target).is('a')){
console.log("Link not clicked");
alert("Link not Clicked");
}
});

Add this to your js:
$(".knock a").on("click", function(e) {
return false;
});

Why not add another method as
$('a').on('click',function(e){
e.stopPropagation();
});
This will stop porpagation of the chaininvocation of events on parent elements.
See updated Fiddle

anchor inside a clickable div

I have this problem with a click script I have connected to a div.
The thing I'm trying to accomplish is that when you click on an URL inside the clickable div, the click event wont be called, and you will be directed to whatever the anchor is calling.
This is the JS
<script type="text/javascript">
$(document).ready(function()
{
$(".comment_button").click(function(){
var element = $(this);
var I = element.attr("id");
$("#slidepanel"+I).slideToggle(300);
$(this).toggleClass("active");
return false;
});
});
</script>
And this is the html
<div class="comment_button" id="<?=$klotter_info['id']?>" style="cursor:pointer;">
<?=sanitize($klotter_info['message'])?> // Kommer i vissa fall ha länkar i sig
</div>
Any help is greatly appreciated! Thanks in advance.

make click handler for your anchor and call stopPropagation:
$('a').click(function(event){
event.stopPropagation();
});
This will disable event bubbling. and div click won't be triggered.

click on link should not trigger parental onclick-event

I've got the following code:
<div onclick="alert('div event');" style="cursor:pointer">
some text
click
</div>
When somebody clicks on the link the javaschipt event is triggered. I want that the event is only triggers if somebody clicks on the text or on the empty space inside the div container; and not if somebody clicks on the link.
Is it possible to call a function when the event is triggered, which checks on which elements the user has clicked. something link
onclick="foo(caller);"
and
function foo(element){
if(element!='link'){
alert('yes');
}
}

Add a click handler to your link and stop event bubbleing to the parent div. Like this:
$('#link').click(function(e) {
e.stopPropagation();
});

$(function (){
$('#link').click(function (e){ e.stopPropagation(); /*do other thing*/});
})

OnClick event you can pass the current object type.
something like
onclick=foo(this)
The function foo looks like
function foo(obj) {
if(obj.tagName != 'A') {
alert('Yes')
}
}

Use the unbind http://api.jquery.com/unbind/