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');
});
});
Related
I have a click event as
$(document).on('click', '#btn1', function(e){
alert('clicked');
e.stopPropagation();
e.stopImmediatePropagation();
return false;
alert('clicked again');
});
However, the clicked again is always showing.
Even after the return false; the click event is executing again.
How can i ensure a 1 time execution.
Use one() instead
$(document).one('click', '#btn1', function(e){
alert('clicked');
});
one documentation
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/
I have something like this:
HTML
<body>
<div>
<p>Text</p>
</div>
<body>
JQuery
$('div').click(function(){
$(this).find('p').fadeToggle('fast');
});
$('body').click(function(){
$('div').find('p').fadeOut();
});
DEMO
How to prevent back item to be clicked when clicking front item ?
You probably need event.stopPropagation() or need to return false from click event handler.
Live Demo
$('div').click(function(event){
event.stopPropagation();
$(this).find('p').fadeToggle('fast');
});
Description: Prevents the event from bubbling up the DOM tree,
preventing any parent handlers from being notified of the event.
To stop the event from propagating, you need to return false from the event handler.
$('div').click(function(){
$(this).find('p').fadeToggle('fast');
return false;
});
I have no experience in jQuery but this works:
$('div').click(function(){
$(this).find('p').fadeToggle('fast');
});
instead of
$('div').click(function(){
$(this).find('p').fadeToggle('fast');
});
$('body').click(function(){
$('div').find('p').fadeOut();
});
Upon document load, am trying to trigger the click event of the first radio button.... but the click event is not triggered.Also, tried 'change' instead of click ...but its the same result.
$(document).ready(function() {
//$("#checkbox_div input:radio").click(function() {
$("input:radio:first").prop("checked", true).trigger("click");
//});
$("#checkbox_div input:radio").click(function() {
alert("clicked");
});
});
Please follow the below link to the question
Example:
http://jsbin.com/ezesaw/1/edit
Please help me out in getting this right.
Thanks!
You are triggering the event before the event is even bound.
Just move the triggering of the event to after attaching the event.
$(document).ready(function() {
$("#checkbox_div input:radio").click(function() {
alert("clicked");
});
$("input:radio:first").prop("checked", true).trigger("click");
});
Check Fiddle
Switch the order of the code: You're calling the click event before it is attached.
$(document).ready(function() {
$("#checkbox_div input:radio").click(function() {
alert("clicked");
});
$("input:radio:first").prop("checked", true).trigger("click");
});
My solution is a bit different:
$( 'input[name="your_radio_input_name"]:radio:first' ).click();
$("#radio1").attr('checked', true).trigger('click');
In my case i had to load images on radio button click,
I just uses the regular onclick event and it worked for me.
<input type="radio" name="colors" value="{{color.id}}" id="{{color.id}}-option" class="color_radion" onclick="return get_images(this, {{color.id}})">
<script>
function get_images(obj, color){
console.log($("input[type='radio'][name='colors']:checked").val());
}
</script>
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/