We Keep Coding

jQuery: Resize event does not fire when using multiple events in a selector

I would like to assign multiple events to a selector instead of creating separate event.
$('element').on('click resize scroll mouseover', function(){
// do something
});
The problem is that the resize event does not fire while the others do.

The documentation for on states that the event argument is one or more space-separated event types and optional namespaces, such as click or keydown.myPlugin. So essentially, what you'r showing in your question is the answer itself.
In the next snippet you can see that clicking an moving the mouse over the element both trigger the listener. What you do inside there is entirely up to you
$(function() {
$("#target").on("click mouseover", function(ev) {
$("#output").text($("#output").text() + "\n"+"event triggered");
})
});
$(function() {
$("#target").on("click mouseover", function(ev) {
$("#output").text($("#output").text() + "\n"+"event triggered");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">I'm a target</div>
<pre id="output">
</pre>

space seperated is correct.
$('element').on('click resize scroll mouseover', function(){
// do something
});
But if the element is live one, you should use this statement.
$(document).on('click resize scroll mouseover', 'element', function(){
// do something
});

$('element').on('click mouseover', function(e) {
// your code here
});

Prevent parent event fire on jQuery

I have very annoying problem in my code.
When I change a checkbox state, the click event of it parent fires as well.
I've tried different methods to solve this problem like:
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
return false
Unfortunately no one works for be (probably it's not related to "event propagation" issue). How can I make ('.sortable').click not to be fired on checkbox change?
HTML
<div class="sortable">
<span>Hello all!</span><br />
<label>Click on me<input type="checkbox" checked="checked" /></label>
</div>
jQuery
$(function(){
$('.sortable input[type=checkbox]').change(function(event){
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
alert('checkbox changed');
});
$('.sortable').click(function(){
alert('sortable clicked');
});
});
You can find the code on: Demo

As you have bind click event to parent div, it is firing that also. You can check the 'target element if not checkbox' condition in parent click event handle like below
$('.sortable').click(function(event){
if(event.target.type!="checkbox")
console.log('sortable clicked');
});
Demo

coz You're Stopping propagation of .change() event and handling .click() event
Just Try changing:
$('.sortable input[type=checkbox]').change(function(event){ ... });
to:
$('.sortable input[type=checkbox]').click(function(event){ ... });
Hope it helps!
Here is a working example: http://fiddle.jshell.net/vjKGv/

I have done some research on jsfiddle
$(function(){
$('.sortable').click(function(e){
e.preventDefault();
console.log('sortable clicked');
});
$('.sortable input[type=checkbox]').click(function(event){
//event.stopImmediatePropagation();
event.stopPropagation();
//event.preventDefault();
console.log('checkbox changed');
});
});

Jquery disable click event for div

Let's say I got a simple click event for a HTML div.
If I click on the div it should trigger a fadeToggle.
In that div I got another div with another trigger.
On that click event it should do something but instead of doing the event it triggers the first event.
How do I prevent event 1 from triggering if I want event2 to trigger?
Event1 should trigger only if I don't press the clickevent on the second event everything else should trigger as usual.
Thanks for your time
HTML
<div id="1">
Event 1
<div id="2">
<div id="3">
but here is something as well event2
</div>
</div>
</div>
JavaScript
$("#1").click(function() {
$(this).slideToggle();
});
$("#3").click(function() {
$(this).css("background-color", "blue");
});
Fiddle: http://jsfiddle.net/VLcxJ/

$("#3").click(function(e) {
e.stopPropagation();
$(this).css("background-color", "blue");
});
After that, clicks on #3 won't reach #2 or #1

Use event.stopPropagation(); :
$("#e3").click(function(event) {
event.stopPropagation();
$(this).css("background-color", "blue");
});
See it working here : http://jsfiddle.net/bYn22/
Note from jQuery API (I couldn't explain it better) : event.stopPropagation() > Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
And note that your IDs can't begin with a number :)

$("#3").click(function(event) {
event.stopPropagation();
$(this).css("background-color", "blue");
});
Added Fiddle: http://jsfiddle.net/VLcxJ/1/

Here is the solution
$("#1").click(function() {
$(this).slideToggle();
});
$("#3").click(function(event) {
event.stopPropagation();
$(this).css("background-color", "blue");
});
http://jsfiddle.net/tR7h9/3/

prevent click event from element but not from <a> children

my code looks like this:
<div class="disabledClickevent">
<ul>
<li><a>link1</a></li>
<li><a>link2</a></li>
</ul>
</div>
the div has a click event that gets disabled with return false;
my problem is that this also disables the <a> links

$(document).on('click','.disabledClickevent' function(e) {
if( e.target !== this )
//clicked out side
return;
//clicked inside
});

I would do this:
$(".disabledClickevent").on("click", ":not(a)", function(e) {
//do stuff with your div
});
This excludes a from the click event.

Could be a solution:
$('.disabledClickevent').on('click',function(e){
if($(e.target).is(':not(a)'))
return false;
});
Or set click handler to links:
$('.disabledClickevent a').click(function(e){
e.stopPropagation();
});

you can use the :not() selector in jQuery
check this link out http://api.jquery.com/not-selector/
hope this helps.

If you don't plan to add new "disabledClickevent" divs to the page via Javascript, you could just do this:
$('.disabledClickevent').click(function() {...});
or
$('.disabledClickevent').bind('click', function() {...});
That attaches the event only to the already-existing div, without doing any sort of delegation, so the links will just work normally as you want them to.
To be clear, this is only a viable solution if all of the "disabledClickevent" divs that you plan to have already exist on the page at the time that you bind the event.

How to use event.stopPropagation() in delegate()

My Code is like following in html:
<li class="arrow">
<div>
remove
</div>
</li>
And I bind my elements using deligate() jquery method (because elements appear dynamically)
$obj.delegate(".arrow", "click", function() {
alert("clicked on arrow");
});
$obj.delegate(".anchor", "click", function(event) {
event.stopPropagation();
alert("anchor clicked");
});
My Problem is, when I click on ".anchor" then both events occurs. can anyone tell me how to use event.stopPropagation() in this context? I tried like the above but not working. Is there any other way to do this?
EDIT: I tried with calling event.isPropagationStopped(), and it returns true. but still both events called.

There is limitations when delegate or live is used and stopPropagation.
You return false in you handler to prevent both eventPropagation and default
Try
$obj.delegate(".anchor", "click", function(event) {
alert("anchor clicked");
return false;
});

My understanding is that with .delegate and .live you need to return false. I believe this is because of how the event is attached - not to the element but to it's ancestor.
Here is an example:
http://jsfiddle.net/G3k8Z/