Develop Reference

Jquery on keyup once

How to trigger another alert when I input some text on next time?
For example:
1. put some text
2. alert triggered
3. put some text again
4. alert trigger again
EDIT: I don't want to keep trigger the alert for every time i input, what i trying to do is... lets say I key in "abcd", the function should just trigger once. Then I click everywhere on the screen. Later, I key in "dddd" again in the textbox, the function trigger again for once
EDIT 2: Sry guys, maybe my requirement a bit confusing, i just edit the code and re-explain to illustrate my real case. So, first, i key in "abcd" on textbox, the tooltip should trigger once on first letter of "a". Then i click everywhere of the screen, the tooltip disappear. Next, I key in again "gfffee", the tooltip should appear again on first letter of "g".
<input type="text" id="test">
<input type="button" id="tool">
$('#test').one("keyup", function(){
$('#tool').tooltip("show");
});
$('#tool').tooltip({
placement: "bottom",
trigger: "focus",
title: "Click here",
});
ANSWER:
Thanks everyone for helping me, I managed solve it based on combination of everyone answer.
count = 0;
$('#test').on("change", function(){
count = 0;
});
$('#test').on("keyup", function(){
if(count == 0)
{
$('#tool').tooltip("show");
count = 1;
}
});
$('#tool').tooltip({
placement: "bottom",
trigger: "focus",
title: "Click here",
});
<input type="text" id="test">
<input type="button" id="tool">

Try this
var triggered = 0; // or false
$('#test').on('input', function() {
if(triggered == 0) {
alert('whatever message here');
triggered++;
}
});
$('#test').on('blur', function() {
// reset the triggered value to 0
triggered = 0;
});

I think there is no deterministic way to figure out when you are done with your input, using just the keyup event. But you can try debounce. I've added underscore.js to use debouce, but feel free to use your own implementation or another library. From the debounce docs of underscore
Useful for implementing behavior that should only happen after the input has stopped arriving
You can play around with the wait time to suit your needs. I've made it 500 ms
$('#test').on("keyup", _.debounce(function() {
alert("test");
}, 500));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<input type="text" id="test">
An excellent explanation of debounce here
Alternate solution
Another possible solution is to attach a blur handler, which will execute if clicked outside your input
$("#test").on("blur", function(e) {
alert("Test")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="test">

Can't you just use the onchange function? From your edit it seems like this would be more appropriate for your use case.
So
$('#test').on("change", function(){
alert("test");
});

on input clear the timer with clearTimeout(userTimer); then start new timer with setTimeout(doneType, maxTimer*1000); the maxTimer is in sec of your choose (2s here) if timeout call the function doneType
var userTimer;
var maxTimer = 2;
//on input, clear the timer and start new timer
$('#test').on('input', function () {
clearTimeout(userTimer);
userTimer = setTimeout(doneType, maxTimer*1000);
});
function doneType() {
alert('keep type?');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test">

Can you stop the jQuery focusout from firing when losing focus?

I've got an input box that I want to have save its value when it loses focus.
Pretty straightforward stuff and I'm able to get that done via jQuery's focusout event.
The problem however, is that I want to NOT fire the focusout event when the user clicks on an "X" icon next to the input box (example shown below)
So when the user tabs out of this input box, or clicks outside of the box or they click the green checkbox it should fire the focusout event... but if they click the red "X", it should NOT fire the focusout.
Is this possible to do with JavaScript / jQuery?
EDIT:
Some of you have recommended using event.relatedTarget, but it seems like that's returning null. I'll include my code in question for clarity:
// This is the cancel button with the red X
$("body").on("click", "span[id*='Cancel']", function(e)
{
showLabel($(this));
});
// this is the code to trigger the blur / focusout event
// trouble is that the "e.relatedTarget" is null
$("body").on("focusout", "input, textarea", function (e) {
if($(e.relatedTarget).is("span[id*='Cancel']")){
return false;
}
$(this).siblings("span[id*='OK']").trigger("click");
return false;
});
Here's a screen grab of me debugging this in JS (you'll see that the $(e.relatedTarget) selector returns nothing):

You can cancel de event returning the focus to previous element.
$('#inputText').focusout(function(event) {
setTimeout(function(){
if (document.activeElement.id == "btnCancel") {
$(event.target).focus();
return false;
}
},1);
});
This jsFiddle shows how to do it: https://jsfiddle.net/mpervh3t/
Hope it helps

You must use relatedTarget like this :
$(document).ready(function(){
$(".btn").on("focusout",function(e){
if($(e.relatedTarget).hasClass("red")) {
alert("You clicked on X button");
}
else {
alert("Fire Focus out")
}
})
})
Final code :
<!DOCTYPE html>
<html>
<head>
<style>
.gr {
color: green;
}
.red {
color: red;
}
</style>
</head>
<body>
<input type="text" class="btn"><button class="gr">Ok</button><button class="red">X</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn").on("focusout",function(e){
if($(e.relatedTarget).hasClass("red")) {
alert("You clicked on X button");
}
else {
alert("Fire Focus out")
}
})
})
</script>
</body>
</html>

As per my comment:
"I have had to do a similar type of thing with a blur event. Basically what I had to do was call a setTimeout on the blur to execute my function to save the data, and then on the click event of the X, cancel the timeout. That way, unless the X is clicked, the save function will fire. The delay can be pretty negligable, too."
I found the relevant code
var sliderTimeout = null;
$(".slider-trigger").on("blur", function () {
sliderTimeout = setTimeout(function () {
$(".slider").hide();
}, 100);
});
$(".ui-slider-handle").on("focus", function () {
clearTimeout(sliderTimeout);
});
Here is the full demo of the code in action. It does much more than demonstrate this, but if you examine the behavior of focusing/blur on the "margin" input, you will see that if you blur the margin input, the slider hides, but if you click on the slider, it cancels the hide and stays shown. It's the exact same concept, just a slightly different application.

Here, I did the thing.
https://jsfiddle.net/kowmLf2a/1/
In the blur event I target the related target. See if that related target is the item that I don't want to blur with. If it is then return false.
Code for reference:
$('#input').blur(function(event){
if($(event.relatedTarget).is('#bt2')){
return false;
}
alert($(this).val());
});

JS: prototype event-observer not fireing

I have a magento test-shop with onepagecheckout extension. This uses a onepagecheckout.js. There should be added 'click'-event observers to the payment radio buttons. But when clicking on them, nothing happens.
The observers are added to the single input elements while each-ing through them:
addObservers: function () {
$$('input[name="payment[method]"]').each(function (el) {
el.observe('click', function () {
checkout.update({
'review': 1,
'payment-changed': 1
});
});
});
}
The eached elements are, as can be seen in the Chrome debugger and fit to the input-element ids and names:
el = input#p_method_bankpayment.radio
el = input#p_method_paypal_express.radio
el = input#p_method_cashondelivery.radio
el = input#p_method_phoenix_cashondelivery.radio
The update function is calling new content via AJAX when page is loaded, but is not executed and no network-activity can be seen, when events should be fired.
The installation can be seen here: http://5.175.9.22/gp_de/onepagecheckout/
(Put something in the cart/Warenkorb, go to checkout/Zur Kasse, not further)
Can somebody tell me why the observers are not working? Other installations are working with this extensions, what's

Your input elements are hidden by
style="display:none;"
so nobody can click them. If you remove display:none in dev-tools and then click the radio button, an alert 'Click' pops up.
Try to use a change event instead of click
addObservers: function () {
$$('input[name="payment[method]"]').each(function (el) {
el.observe('change', function () {
checkout.update({
'review': 1,
'payment-changed': 1
});
});
});
}
Update:
I've taken a closer look to this. This could not work with a change event, because there are onclick Attributes on each radiobutton. These are not triggered 'onchange'. So try to trigger the (example):
onclick="payment.switchMethod('phoenix_cashondelivery')"
event with something like this
$$('input[name="payment[method]"]').each(function (el) {
el.observe('change', function () {
$(this).simulate('click');
checkout.update({
'review': 1,
'payment-changed': 1
});
});
});

Attach one time event to dynamically added elements

I have a web page where there is a button, when the button is clicked a Textbox is added to a DIV. Here is a similar code that I'm working with:
HTML
<button class="addText">Add Textbox</button>
<div class="textCont">
</div>
JavaScript
$(document).on("click", ".addText", function() {
var textarea = $("<textarea/>", {class: "newText"});
$(".textCont").append(textarea);
});
$(document).one("focus", ".newText", function() {
alert("Great");
});
Fiddle: http://jsfiddle.net/ErRohitAgg/g3A7T/
What I'm trying to do is to show an alert for first focus of every textbox that is added. But, instead the focus event is executing only once, and not once for each Textbox.
Is there any way the event behaves according to the functionality I need??

Add the event handler to each textarea instead
$(document).on("click", ".addText", function() {
$("<textarea/>", {
'class': 'newText',
one : {
focus: function() {
alert("Great");
}
}
}).appendTo(".textCont");
});
FIDDLE

I would rather do it by adding newclass on first focus:
$(document).on("focus", ".newText", function() {
if(!$(this).hasClass('focused')){
$(this).addClass('focused')
alert("Great");
}});
Working Demo

Why does the jQuery file upload stop working after first upload?

I'm using the jQuery File Upload plugin. I'm hiding the file input and activating it upon clicking a separate button. (See this fiddle.)
HTML:
<div>
<button class="browse">Browse</button>
<input id="upload" type="file" style="display: none;" />
</div>
JavaScript:
var element = $("#upload");
$(".browse").click(function () {
$("#upload").trigger("click");
});
element.fileupload({
add: function () {
alert("add");
}
});
Notice that if you press the button then select a file, the add method is activated and you'll get an alert. Do it again, and you'll get another alert.
Now, see this fiddle. The only difference is that I've changed the following line
$("#upload").trigger("click");
to
element.trigger("click");
Notice that now, the first time you click the button then select a file, the add method is activated and you get the alert (just like before), but if you do it again, the add method never activates.
What is causing this difference in behavior?

This can also be solved by setting replaceFileInput to false, as stated by the documentation. This is because the plugin recreates the input element after each upload, and so events bound to the original input will be lost.

It looks as though the scope of element is being lost / changed after the add function. Resetting it like below seems to work.
var element = $("#upload");
$(".browse").click(function () {
element.trigger("click");
});
element.fileupload({
add: function () {
alert("add");
element = $(this);
}
});
Fiddle

Try this one: http://jsfiddle.net/xSAQN/6/
var input = $("#upload");
$(".browse").click(function () {
input.trigger("click", uploadit(input));
});
function uploadit(input){
$(input).fileupload({
add: function () {
alert("add");
}
});
}
Although there is one more way:
just change to this:
var element = $("#upload");
$(".browse").click(function () {
$("#upload").click(); // <----trigger the click this way
});
element.fileupload({
add: function () {
alert("add");
}
});