Add onblur attribute back after removing it - javascript

I have a textbox that uses onblur and ondblclick - when they double click it opens a pop screen but I don't want the onblur to be triggered.
When the double click function is called I removed the onblur attribute to stop it getting triggered. This works but now I'm trying to add the onblur back after the pop up opens but it's not working
function OpenCust(v) {
$('#<%= txtDebtor.ClientID %>').removeAttr('onblur');
shadowboxopen = true;
if (!v || 0 === v.length) {
}
else {
Shadowbox.open({
content: "lookups/Customer.aspx?NODEBT=true&CustomerAC=" + v,
player: "iframe",
onClose: function () { shadowboxopen = false; },
title: "Edit Customer"
});
}
$('#<%= txtDebtor.ClientID %>').attr('onblur');
}
edit:
Changed code to use on and off for the blur function but the onblur is still getting triggered when the double click OpenCust is being called.
textbox: <asp:TextBox runat="server" ID="txtDebtor" onblur="CheckIfAccountCodeDebtValid(this.value)" ondblclick="OpenCust(this.value)"></asp:TextBox>
function OpenCust(v) {
$('#<%= txtDebtor.ClientID %>').off('blur', CheckIfAccountCodeDebtValid(v));
shadowboxopen = true;
if (!v || 0 === v.length) {
}
else {
Shadowbox.open({
content: "lookups/Customer.aspx?NODEBT=true&CustomerAC=" + v,
player: "iframe",
onClose: function () { shadowboxopen = false; },
title: "Edit Customer"
});
}
setTimeout(function() {
$('#<%= txtDebtor.ClientID %>').on('blur', CheckIfAccountCodeDebtValid(v));
}, 2000);
}

You will have to specify the value of the onblur when re-adding it. The correct functions in jQuery to do this are on() and off(). In the example below you can see how I remove the blur event handler after clicking on the button but after 2 seconds ill add it again. If the button loses focus within these 2 seconds there won't be a blur console message. If it loses focus after it does.
//Add blur event handler to the button
$('#button').on('blur', blurFunction);
//Add click event handler to the button
$('#button').on('click', function() {
//Remove blur event handler
$('#button').off('blur', blurFunction);
console.log('click');
setTimeout(function() {
//reattach blur event handler after 2 seconds
$('#button').on('blur', blurFunction);
}, 2000);
});
//The actual blur event handler function
function blurFunction() {
console.log(this.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="button" type="button" value="test-value">
With the function that uses a parameter you can wrap it in an anonymous function like in below snippet.
//Add blur event handler to the button
$('#button').on('blur', function() {
CheckIfAccountCodeDebtValid(this.value);
});
//Add click event handler to the button
$('#button').on('click', function() {
//Remove all blur event handlers
$('#button').off('blur');
console.log('click');
setTimeout(function() {
//reattach blur event handler after 2 seconds
$('#button').on('blur', function() {
CheckIfAccountCodeDebtValid(this.value);
});
}, 2000);
});
//The actual blur event handler function
function CheckIfAccountCodeDebtValid(value) {
console.log(value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="button" type="button" value="test-value">

Related

How to bind click and double click events on the same element in CKeditor

I am having an issue with CKeditor click event and double-click events.
Currently, I am binding click event and double click event to the CKEditor dom.
editor.on('doubleclick', function (evt) {
console.log("doubleclicked");
//Some ajax calls
}, null, null, 999 );
editor.on('click', function (evt) {
console.log("clicked");
//Some ajax calls
}, null, null);
An issue with above code is, it fires click event first as well when I double-click the element. Both codes execute when I double click on the element.
Any solution for CKEditor for above case?
My question is related to CKeditor plugin. So I have to bind proper (built-in) events for click and double click.
Try this. It will work. For CKeditor you can replace editor.on('dblclick', function (evt) { line with this line editor.on('doubleclick', function (evt) {
Check this link.
function singleClick(e) {
console.log('single click');
}
function doubleClick(e) {
console.log('double click');
}
editor.on('dblclick', function (evt) {
$(this).data('double', 2);
doubleClick.call(this, evt);
//Some ajax calls
}, null, null, 999 );
editor.on('click', function (evt) {
var that = this;
setTimeout(function() {
var dblclick = parseInt($(that).data('double'), 10);
if (dblclick > 0) {
$(that).data('double', dblclick-1);
} else {
singleClick.call(that, evt);
}
}, 300);
//Some ajax calls
}, null, null);

Jquery on click doesn't fire when blur is also bound

My blur event fires but not my click event. If I remove the blur event code the click event works fine.
How do I change the order these events fire?
$.fn.autoComplete = function () {
$(document).on('click', '#' + settings.resultsDivId + ' tr', function () {
console.log('click fired');
$('#' + settings.resultsDivId).hide();
});
this.on('blur', function () {
console.log('blur fired');
$('#' + settings.resultsDivId).hide();
});
function AutoComplete(term) {
// ajax call stuff
}
};
Changing click to mousedown solved it. Apparently click fires after blur.
Blur event stops click event from working?

How do I stop .click()?

I create a button 2 button. "square" and "circle"
When I click square and click circle. Square could not stop working.
<button id="square">square</button>
<button id="circle">circle</button>
Do I need to do?
$('#square').on('click', function () { $("canvas").on({
mousedown: function (e) {
...
},
mousemove: function (e) {
..
},
mouseup: function () {
..
}
}); });
$('#circle').on('click', function () { $("canvas").on({
mousedown: function (e) {
...
},
mousemove: function (e) {
..
},
mouseup: function () {
..
}
}); });
If you add an event listener with jQuery method .on() you can remove this event listener with jQuery method .off() like this:
$('#square').on('click', fnEventHandler); // add ONE on click event listener to #square DOM element
$('#square').off('click'); // remove ALL on click event listeners from #square DOM element
For your specific mockup it could look somehow like this:
$('#square').on('click', function() {
console.log('button#square on click handler'); // just for debug purpose
$('#circle').off('click'); // remove button#circle event listener
// do what ever you want to do after click on #square eg: $("canvas").on(...)
});
$('#circle').on('click', function() {
console.log('button#circle on click handler'); // just for debug purpose
$('#square').off('click'); // remove button#square event listener
// do what ever you want to do after click on #circle eg: $("canvas").on(...)
});
Please click both buttons:
<button id="square">square</button>
<button id="circle">circle</button>
<br>
To reset the behavior click "Run code snippet" again.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Or you make use of the disabled-attribute:
$('#square').on('click', function() {
console.log('button#square on click handler'); // just for debug purpose
$('#circle').prop('disabled', true); // disable button#circle event listener
// do what ever you want to do after click on #square eg: $("canvas").on(...)
});
$('#circle').on('click', function() {
console.log('button#circle on click handler'); // just for debug purpose
$('#square').prop('disabled', true); // disable button#circle event listener
// do what ever you want to do after click on #circle eg: $("canvas").on(...)
});
Please click both buttons:
<button id="square">square</button>
<button id="circle">circle</button>
<br>
To reset the behavior click "Run code snippet" again.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The snippets above should illustrate whats going on in essence.
The snippet below shows an advanced way to add, remove and re-add event listeners in a somehow more generic way.
(function( $ ) {
var oHasEventListener = {},
removeEventListener = function( sKey ) {
// sanitize sKey first
if ( !oOnClickHandler[ sKey ] ) {
return console.log('sKey: "' + sKey + '" is not available'); // just for debug purpose
}
if ( oHasEventListener[ sKey ] ) {
$('#' + sKey).off('click').prop('disabled', true);
oHasEventListener[ sKey ] = false;
console.log('button#' + sKey + ' on click listener removed'); // just for debug purpose
}
},
addEventListeners = function() {
for ( sKey in oOnClickHandler ) {
if ( !oHasEventListener[ sKey ] ) {
$('#' + sKey).on('click', oOnClickHandler[ sKey ]).prop('disabled', false);
oHasEventListener[ sKey ] = true;
console.log('button#' + sKey + ' on click listener added'); // just for debug purpose
}
}
},
oOnClickHandler = {
square: function() {
console.log('button#square on click event catched'); // just for debug purpose
removeEventListener('circle');
// do what ever you want to do after click on #square eg: $("canvas").on(...)
},
circle: function() {
console.log('button#circle on click event catched'); // just for debug purpose
removeEventListener('square');
// do what ever you want to do after click on #circle eg: $("canvas").on(...)
},
reset: addEventListeners
};
addEventListeners(); // add event listeners on startup
})( jQuery )
<button id="square">square</button>
<button id="circle">circle</button>
<button id="reset">reset</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you need some further explanations please feel free to leave a comment.

How to trigger an event when the user clears the text field and focus out of the text field using Jquery?

I need to write an event handler when user clears the text field and moves out of focus from the same.
I'm using the following function to catch "focus out" event.
$("input[type=text]").blur(function () {
}
I have the followingfunction to capture clear field event.
$("input[type=text]").keyup(function() {
if (!this.value) {
}
}
I tried using the keyup() function inside blur() since I need to capture the focus out and then clear field. This is how my code looks like:
$("input[type=text]").blur(function () {
$(this).keyup(function() {
if (!this.value) {
}
}
}
But it doesn't work. Clear field event is triggered even before focus is out of the field. Also, it is triggering the event multiple times. What is the problem here?
I think that is more simple:
$('input').on('blur', function(e) {
if(!$(this).val()) {
// IS NO VALUE IN THE INPUT
$(this).trigger('blur'); // trigger the blur event
}
});
Here you are:
$("input[type=text]").on('blur', function() {
alert('blur');
});
$("input[type=text]").on('input', function() {
if (!$(this).val()) {
alert("input nothing");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
Hope this helps.

jquery change sometimes event prevents click event

In the following example, there is a simple input field and a button.
<body>
<input type="text" id="in">
<input type="button" value="click" id="button">
</body>
There is a change-event-function on the input field and a click-event-function on the button.
$(document).ready(function() {
$('#in').change(function() {
console.log('change event');
//window.alert('change event');
});
$('#button').click(function() {
console.log('click event');
});
});
On changing the value of the input field and immediately clicking the button (without leaving the cursor), my expectation is, that both events are fired. Unfortunately this behavior depends on the code executed inside the change-function e.g. on uncommenting the window.alert line, the click event is NOT fired - or the click-event-function is not executed. Why? How can I avoid code, which prevents the click-event-function from executing?
Update:
instead of the window.alert, the jquery.hide has the same effect
$(document).ready(function() {
$('#in').change(function() {
console.log('change event');
$('#hide').hide();
});
$('#button').click(function() {
console.log('click event');
});
});
If you want to fire both of two events, you can do like this:
$(document).ready(function() {
$('#in').change(function() {
console.log('change event');
window.alert('change event');
$('#button').click();
});
$('#button').click(function() {
console.log('click event');
});
});
Try
$(document).mousedown(function(e){
console.log('click event');
});
The mousedown event will occur before textbox change and click events so that you need to set time out and check the changed value of the text box if required.

Categories