Multiple events on same element, stop immediate propagation - javascript

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.

Related

How to trigger delete key in jQuery

I am looking for a way to trigger the delete key on jQuery. However, for example, the whole selection (Ctrl+A) works well, The Delete key does not work.
Below is a part of my code:
var ctrlA = $.Event( "keydown", { keyCode: 65, ctrlKey:true } ),
e = $.Event( "keydown", { keyCode: 46 } );
....
$( editor.getBody() ).trigger( ctrlA );
$( editor.getBody() ).trigger( e );
This will make the entire selection but it will not be deleted.
How to trigger the Delete key in jQuery?

jQuery change and click events

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

Popup window not showing div

I have this JQuery code:
function JQueryPopup(value) {
$(value).toggle();
$('#JQueryClose').click(function(){
$(value).hide();
});
$( document ).on( 'click', function ( e ) {
$(value).hide();
});
$( document ).on( 'keydown', function ( e ) {
if ( e.keyCode === 27 ) { // ESC
$(value).hide();
}
});
}
and a HTML button that calls this function, it doesn't seem to be showing the popup window/div.
here is a fiddle with my full code: http://jsfiddle.net/XHLY8/3/
P.S. i do have this code on another page, i call the function like this:
<script type="text/javascript">JQueryPopup('#customer_popup_notes');</script>
which works fine.
You need to add the following:
$('#inbox_button').on('click', function(event){
event.preventDefault(); // This isn't critical, but you would need
event.stopPropagation();
JQueryPopup('#inbox_div');
});
You want to stop the click event from bubbling up and triggering the following:
$( document ).on( 'click', function { ... });
Otherwise your #inbox_div will be hidden before you can see it.
Here is a working fiddle.
I suggest reading up on stopPropagation and preventDefault.
You dont need
$( document ).on( 'click', function ( e ) {
$(value).hide();
});
Which always hides the Bottom div no matter where u click .
Working fiddle

jquery: on eventhandler called multiple times

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.

Calling a jQuery function multiple times

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

Categories

Resources