We Keep Coding

Onlick event not triggering which contains blur function

I have a form and on click on an input, I'm adding classes to that input's wrapped div.
To do this, I've made use of blur and executing my function on click. However, on some cases (very rarely) it will work (and add the class). But majority of the time, it doesn't perform the click action (because the console.log("click") doesn't appear).
My thinking is that maybe the browser is conflicting between the blur and click. I have also tried changing click to focus, but still the same results.
Demo:
$(function() {
var input_field = $("form .input-wrapper input");
$("form .input-wrapper").addClass("noData");
function checkInputHasValue() {
$(input_field).on('blur', function(e) {
var value = $(this).val();
if (value) {
$(this).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("hasData");
} else {
$(this).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("noData");
}
});
}
$(input_field).click(function() {
checkInputHasValue();
console.log("click");
});
});

i've done some modification in your code .
function checkInputHasValue(e) {
var value = $(e).val()
if (value) {
$(e).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("hasData");
} else {
$(e).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("noData");
}
}
$(document).on('blur',input_field, function(e) {
checkInputHasValue($(this));
});
$(document).on("click",input_field,function() {
checkInputHasValue($(this));
console.log("click");
});

In order to avoid conflits between events, you would separate the events and your value check. In your code, the blur event may occur multiple times.
The following code seems ok, as far as I can tell ^^
$(function() {
var input_field = $("form .input-wrapper input");
$("form .input-wrapper").addClass("noData");
function checkInputHasValue(el) {
let target = $(el).closest(".input-wrapper");
var value = $(el).val();
$(target).removeClass("hasData noData");
$(target).addClass(value.length == 0 ? "noData" : "hasData");
console.log("hasData ?", $(target).hasClass("hasData"));
}
$(input_field).on("click", function() {
console.log("click");
checkInputHasValue(this);
});
$(input_field).on("blur", function() {
checkInputHasValue(this);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="input-wrapper">
<input>
</div>
</form>

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.

Prevent click after focus event

When user clicks on input field, two consecutive events are being executed: focus and click.
focus always gets executed first and shows the notice. But click which runs immediately after focus hides the notice. I only have this problem when input field is not focused and both events get executed consecutively.
I'm looking for the clean solution which can help me to implement such functionality (without any timeouts or weird hacks).
HTML:
<label for="example">Example input: </label>
<input type="text" id="example" name="example" />
<p id="notice" class="hide">This text could show when focus, hide when blur and toggle show/hide when click.</p>
JavaScript:
$('#example').on('focus', _onFocus)
.on('blur', _onBlur)
.on('click', _onClick);
function _onFocus(e) {
console.log('focus');
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
$('#notice').removeClass('hide');
}
function _onClick(e) {
console.log('click');
$('#notice').toggleClass('hide');
}
function _onBlur(e) {
console.log('blur');
$('#notice').addClass('hide');
}
UPDATED Fiddle is here:

I think you jumbled up the toggles. No need to prevent propagation and all that. Just check if the notice is already visible when click fires.
Demo: http://jsfiddle.net/3Bev4/13/
Code:
var $notice = $('#notice'); // cache the notice
function _onFocus(e) {
console.log('focus');
$notice.removeClass('hide'); // on focus show it
}
function _onClick(e) {
console.log('click');
if ($notice.is('hidden')) { // on click check if already visible
$notice.removeClass('hide'); // if not then show it
}
}
function _onBlur(e) {
console.log('blur');
$notice.addClass('hide'); // on blur hide it
}
Hope that helps.
Update: based on OP's clarification on click toggling:
Just cache the focus event in a state variable and then based on the state either show the notice or toggle the class.
Demo 2: http://jsfiddle.net/3Bev4/19/
Updated code:
var $notice = $('#notice'), isfocus = false;
function _onFocus(e) {
isFocus = true; // cache the state of focus
$notice.removeClass('hide');
}
function _onClick(e) {
if (isFocus) { // if focus was fired, show/hide based on visibility
if ($notice.is('hidden')) { $notice.removeClass('hide'); }
isFocus = false; // reset the cached state for future
} else {
$notice.toggleClass('hide'); // toggle if there is only click while focussed
}
}
Update 2: based on OP's observation on first click after tab focus:
On second thought, can you just bind the mousedown or mouseup instead of click? That will not fire the focus.
Demo 3: http://jsfiddle.net/3Bev4/24/
Updated code:
$('#example').on('focus', _onFocus)
.on('blur', _onBlur)
.on('mousedown', _onClick);
var $notice = $('#notice');
function _onFocus(e) { $notice.removeClass('hide'); }
function _onClick(e) { $notice.toggleClass('hide'); }
function _onBlur(e) { $notice.addClass('hide'); }
Does that work for you?

Setting a variable for "focus" seems to do the trick : http://jsfiddle.net/3Bev4/9/
Javascript:
$('#example').on('focus', _onFocus)
.on('click', _onClick)
.on('blur', _onBlur);
focus = false;
function _onFocus(e) {
console.log('focus');
$('#notice').removeClass('hide');
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
focus = true;
}
function _onClick(e) {
console.log('click');
if (!focus) {
$('#notice').toggleClass('hide');
} else {
focus = false;
}
}
function _onBlur(e) {
console.log('blur');
$('#notice').addClass('hide');
}

If you want to hide the notice onBlur, surely it needs to be:
function _onBlur(e) {
console.log('blur');
$('#notice').addClass('hide'); // Add the hidden class, not remove it
}
When doing this in the fiddle, it seemed to fix it.

The code you have written is correct, except that you have to replae $('#notice').removeClass('hide'); with $('#notice').addClass('hide');
Because onBlur you want to hide so add hide class, instead you are removing the "hide" calss.
I hope this is what the mistake you have done.
Correct if I am wrong, Because I don't know JQuery much, I just know JavaScript.

you can use many jQuery methods rather than add or move class:
Update: add a params to deal with the click function
http://jsfiddle.net/3Bev4/23/
var showNotice = false;
$('#example').focus(function(){
$('#notice').show();
showNotice = true;
}).click(function(){
if(showNotice){
$('#notice').show();
showNotice = false;
}else{
showNotice = true;
$('#notice').hide();
}
}).blur(function(){
$('#notice').hide();
});

Only use .on() for radio buttons that aren't disabled

I have the following code that run's when a radio button is clicked on. However I am trying to change it so it only runs if the radio button that is being clicked is NOT disabled.
Could anyone help me with this?
$('#divName').on('click', 'input[type="radio"]', function(event) { }

One way would be the use of :not()
$('#divName').on('click', 'input[type="radio"]:not([disabled])', function(event) { }
another would be to exit the function immediately if it is inactive..
$('#divName').on('click', 'input[type="radio"]', function(event) {
if (this.disabled) return;
});

You could use the :enabled selector:
$('#divName').on('click', 'input[type="radio"]:enabled', function(event) { }
But depending on what exactly you want to do, you might want to use the change event instead:
$('#divName').on('change', 'input[type="radio"]', function(event) { }

how about (not tested):
$('#divName').on('click', 'input[type="radio"]:enabled', function(event) { }

jQuery: focusout to exclude some elements

focusout on input field will trigger every time the specific input looses its focus.
But, I want to exclude some specific a tag from triggering that focusout function
Example:
<input type="text" id="name_input">
<a id="apply_name">SAVE</a>
Then the focusout function:
$("#name_input").focusout(function(e) {
//do something here
});
Clicking on "#apply_name" also triggers focusout function of an input. How can I exclude that specific element ID from triggering it.
Note: I tried some tricks already posted on StackOverflow and none of them seams to work...

Another way of doing this is checking what your target id is
var evt;
document.onmousemove = function (e) {
e = e || window.event;
evt = e;
}
$("#name_input").focusout(function (e) {
if (evt.target.id == "apply_name") {
//apply_name clicked
} else {
//focus out and applyname not clicked
}
});
DEMO

You can use "blur" - event.
$("#name_input").on("blur", function(e) {
//your code
});

Solution from How to exclude Id from focusout
Added .hasClass which I also needed:
$('#id').focusout (function (e) {
if (e.relatedTarget && $(e.relatedTarget).hasClass('dontFocusOut')) {
return;
}
//do your thing
});