Binding events to an element should be something like:
$( document ).on( 'change', '#mySelect', showEvent );
$( document ).on( 'click', '#mySelect', showEvent );
function showEvent() {
console.log( event.target );
}
But by doing a simple test as shown below, binding the change and click events to the object mySelect they are triggered on different elements (change only by changing the select and the click by clicking anywhere on the document).
var mySelect = $( '#mySelect' );
$( document ).on( 'change', mySelect, showEvent );
$( document ).on( 'click', mySelect, showEvent );
function showEvent( event ) {
console.log( event.target );
}
Two questions:
How does the change event work? By the documentation it shouldn't work because the selector must be a string:
A selector string to filter the descendants of the selected elements that trigger the event.
It souldn't work but, if the change works, why doesn't the click?
selector
Type: String A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
Taken from http://api.jquery.com/on/
You are using the selector as a jQuery object, this method is mainly using for event delegation for binding event to dynamically generated element. So you can bind event directly to the jQuery object as
var mySelect = $( '#mySelect' );
mySelect.on( 'change', mySelect, showEvent )
.on( 'click', mySelect, showEvent );
function showEvent() {
console.log( event.target );
}
If it's dynamically generated then remove the $ wrapping just provide it as string
var mySelect = '#mySelect';
$( document ).on( 'change', mySelect, showEvent );
$( document ).on( 'click', mySelect, showEvent );
function showEvent() {
console.log( event.target );
}
Related
How can I disable keyup/keydown formatting when using $.number()?
jQuery Number Plugin by Custom D https://github.com/customd/jquery-number
My code:
$( 'input' ).number( true, 2 );
What worked for me was unbinding the 'keyup.format' and 'keydown.format' events from the element.
e.g
$( 'input' ).number( true, 2 ).unbind( 'keyup.format' ).unbind( 'keydown.format' );
Also, you could then manually format the number, now that the .number() plugin is instantiated against the input element.
e.g on a blur event
...
$( 'input' ).on( 'blur', function() {
$(this).val( $(this).val() );
});
I have an event
'change select': function( event, template ) {
let role = $( event.target ).find( 'option:selected' ).val();
[...]
},
But couldn't I replace the jQuery code $( event.target ).find( 'option:selected' ).val() with plain JS code event.target.value and obtain the same result?
So is the above snippet equivalent with
'change select': function( event, template ) {
let role = event.target.value;
[...]
},
and isn't it better to not rely on the jQuery library?
I have two click events on the same element. One of them is a delegated event, and the the other one is not.
$( document ).on( 'click.bar', 'p', function( e ) {
console.log( 'click.bar', e );
e.stopImmediatePropagation();
});
$( 'p' ).on( 'click.foo', function( e ) {
console.log( 'click.foo' );
});
I want to disable the "click.foo" in a specific situation, when "click.bar" is executed. The problem is, that "click.foo" is always called before "click.bar" is called. Any ideas?
If you handle both events from $(document), the event.stopImediatePropagation works fine.
You have to register the first event (the one with the event.stopImediatePropagation) first in the script, so it is called first when document is clicked.
$( document ).on( 'click.bar', 'p', function( e ) {
console.log( 'click.bar', e );
e.stopImmediatePropagation();
});
$( document ).on( 'click.foo', 'p', function( e ) {
console.log( 'click.foo' );
});
Other way it won't work because jQuery bubbles the event up (inner to outer), so the event registered in p is triggered first before it reaches the document.
I wish to do the following:
Create a list(ul and li). Then on ul click, i want to insert div based on condition i.e. if checkbox is selected then created a div with 4 checkboxes.
If radio is selected from the list then a div is created with 4 radios.
Following is my jquery code:
var addDiv=document.createElement("div");
$("#id-ul").click(function(){$('#sidr-bottom').hide();
var div_id=0;
addDiv=document.createElement("div");
$( "#A_MULTI" ).on( "click", { divId:addDiv }, myHandler );
$( "#A_RADIO" ).on( "click", { divId:addDiv }, myHandlerRadio );
addDiv.id = "div_multi"+div_id; ...
checkbox handler:
function myHandler( event ) {
alert("check : "+ event.data.divId );}
radio handler:
function myHandlerRadio( event ) {
alert("radio:"+ event.data.divId );}
Now the problem is that when i click on checkbox from the list for first time, myhandler is not called.
When i click it again, handler gets called once.
When i click it once more, handler gets called twice.
What is the reason for this weird behavior?
Please let me know how do i solve this.
edited :
I moved the below 2 lines outside #id-ul click.
$( "#A_MULTI" ).on( "click", { divId:addDiv }, myHandler );
$( "#A_RADIO" ).on( "click", { divId:addDiv }, myHandlerRadio );
I still face the same problem.
This is because you are assigning event handler every time your #id-ul is clicked.
Please move your event outside event handler.
The problem is that you are adding handlers without ever clearing them. You should do this:
$( "#A_MULTI" ).off("click").on( "click", { divId:addDiv }, myHandler );
$( "#A_RADIO" ).off("click").on( "click", { divId:addDiv }, myHandlerRadio );
To remove the old handler(s) before assigning new ones.
So, I have this function in jQuery:
$(function(){
$( ".unfocused" ).click(function ClickHeader () {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
});
It works perfectly when a header is clicked the first time, but when I try to click another unfocused header, the function doesn't work anymore. Is it because it runs on document .ready?
Thanks for your help!
Change it like this:
$( document ).on("click", ".unfocused", function() {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
This basically registers the event on the document. When you click a header, the event bubbles up to the document. There, the given selector is validated and the function is executed if needed.
Here is a jsfiddle using the delegate operation for handling the event like you need.
http://jsfiddle.net/MN9Zt/2/
$("body").delegate(".unfocused", "click", function() {
$(this).addClass("focused");
$(this).removeClass("unfocused");
$(".header").not(this).addClass("unfocused");
$(".header").not(this).removeClass("focused");
});