We Keep Coding

Password Hide/Show Button only works one-way

I've build a little function which should change the content of a span, which lies in a <td> together with a button to the value of the button on the first push of the button. When the button is pushed again, it should replace the content with four asterisks.
Unfortunately, it only works one-way
$(".pw_show").click(function () {
$(this).parent('td').children('span').html($(this).attr('value'));
$(this).toggleClass('pw_hide pw_show');
});
$(".pw_hide").click(function () {
$(this).parent('td').children('span').html("****");
$(this).toggleClass('pw_hide pw_show');
});
Fiddle down here: http://jsfiddle.net/kXNk8/218/

You toggle the classes so you need to use dynamic event binding with .on() instead of .click():
$('table').on('click',".pw_show", function () {
$(this).parent('td').children('span').html($(this).attr('value'));
$(this).toggleClass('pw_hide pw_show');
});
$('table').on('click',".pw_hide", function () {
$(this).parent('td').children('span').html("****");
$(this).toggleClass('pw_hide pw_show');
});
jsFiddle example
After the first click, .pw_show no longer exists on the element which causes your issue.

Delegating to a static element using .on() will make it work or you should change it totally.
$(document).on("click", ".pw_show", function () {
$(this).parent('td').children('span').html($(this).attr('value'));
$(this).toggleClass('pw_hide pw_show');
});
$(document).on("click", ".pw_hide", function () {
$(this).parent('td').children('span').html("****");
$(this).toggleClass('pw_hide pw_show');
});
Fiddle: http://jsfiddle.net/4atrmks3/

You should really just toggle the attribute for type between password and text not use a placeholder.
var password = false;
$('a').click(function(){
if (!password){
password = true;
$('input').attr('type', 'password');
} else {
password = false;
$('input').attr('type', 'text');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
Click to toggle password / text

Jquery click event on button without class or id

I have this button that I can't change, nor can I edit toCashier():
<input type="button" value="Till kassan" onclick="toCashier()">
And I want to track if it's clicked and execute some javascript.
$(document).ready ( function () {
$('button[value="Till kassan"]').on('click', function(){
alert("Night button clicked");
});
});
I tried that but it doesn't seem to work. I tried various things but can't get it to work.

You have mismatched input and button, try the following :
$(document).ready ( function () {
$('input[value="Till kassan"]').on('click', function(){
alert("Night button clicked");
});
});
Or
$(document).ready ( function () {
$('input[type="button"][value="Till kassan"]').on('click', function(){
alert("Night button clicked");
});
});

button !== input
You need to use the correct selector.
$('input[value="Till kassan"]')

If you make the click with function, toCashier() function need to create :
function toCashier(){
alert("Night button clicked");
}

Detect change in an input field when selecting value from a box

I want to detect a change in the input field when i select a value from the box like in the picture below.
html:
<input type="text" class="AgeChangeInput" id="range"/>
js:(not working)
<script>
$(document).ready(function()
{
alert("Hello");
$("#range").bind('input', function()
{
alert("done");
});
});
</script>
I also tried live on functions but they didn;t work too.

Your date selection box should fire a change event, then you only need to capture it:
$(function () {
$('#range').change(function () {
...
});
});
If the selection box doesn't fire the event, you'll need to trick the dom. Something like:
$(document).ready(function () {
// Asuming your selection box opens on input click
$('#range').click(function () {
$('.special-box-class').click(fireRangeEvent);
});
// Now the firing function
function fireRangeEvent() {
...
}
});
Hope it works

Try to use this code
changeDate - This event is fired when the date is changed.
$('#range').datepicker().on('changeDate', function(ev) {
//example of condition
if (ev.date.valueOf() > checkout.date.valueOf()) {
//make action here
alert('Here');
}
});

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

jquery function dont reflect the class change made my another event

hover class anchor alerts it's title value on hover and when on nohover class anchor, add nopop class to the anchor with hover class. and thus to stop hover alert as it is expected to alert only on hover class without nopop class.
<a class="hover" title="bla bla bla">hover alert</a><br/>
<a class="nohover">stop hover alert</a>
please where I went wrong here
$(function () {
$(".hover:not(.nopop)").hover(function () {
alert($(this).attr("title"));
})
$(".nohover").hover(function () {
$(".hover").addClass("nopop");
});
});
Fiddle http://jsfiddle.net/z4BHJ/8/

You need to use a delegated handler since the selector is dynamic
$(function () {
$(document).on('mouseenter', '.hover:not(.nopop)', function () {
alert($(this).attr("title"));
})
$(".nohover").hover(function () {
$(".hover").addClass("nopop");
});
});
Demo: Fiddle