Develop Reference

How to remove a keycode event handler once it has been added?

How can I remove a keypress event handler after I have set one for an element?
I have a search box with the id #sb that lists search suggestions upon typing via autocomplete, and then goes to the very first suggestion upon pressing enter if there is one.
It works fine if the user enters a search string which does not exist. Pressing ENTER goes nowhere as it should.
However, if a valid search suggestion is returned, and then the user changes their mind and decides to search for another string for which there is no search suggestion... pressing ENTER still goes to the previously suggested search result.
For example, if the user searches for "hot dogs", deletes that entirely, and then searches for "asgdoksadjgoawhet" then upon pressing enter they will be redirected to http://example.com/hot-dogs, when in fact nothing should happen.
Below is the response section of my autocomplete code:
response: function( event, ui ) {
if(typeof ui.content[0] == 'undefined') {
//no search results exist
//make enter do nothing
$('#sb').keypress(function(e) {
if(e.which == 13) {
e.preventDefault(); //does not work
$('#sb').off('keypress', '#sb'); //does not work, either
}
});
} else {
//search results exist
//make ENTER go to the first suggested result
$('#sb').on('keypress', function(e) {
if(e.which == 13) {
window.location.href = 'http://example.com/'+ui.content[0].id;
}
});
}
}
Should I not be using anonymous functions, perhaps?

If you want to unbind it directly after use you can use .one
This will fire the event only once:
$('#sb').one('keypress', function(e) {
if(e.which == 13) {
//do stuff
}
});
If you however want to unbind the event at any other time you can do this:
var kbEvent = $('#sb').on('keypress', function(e) {
if(e.which == 13) {
//do stuff
}
});
.... some other code ...
$('#sb').off(kbEvent);

$( "#foo" ).bind( "click", handler );
function handler(){
//do the stuff
}
//after some condition
$( "#foo" ).unbind( "click", handler );
Bind the reference of function to event callback, so you can later use it to unbind.

$('#sb').on("keypress", function(e) {
if(e.which == 13) {
$(this).off(e);
}
});

$('#sb').off('keypress', '#sb');
removes the event handler on the child elements '#sb' of the element '#sb'.
$('#sb').off('keypress'); removes the event handler on '#sb'.
Another exemple
$( "#dataTable tbody" ).on( "click", "tr", function() {
//...
}); adds an event handler on each tr elements in "#dataTable tbody"
$( "#dataTable tbody" ).off( "click", "tr"); removes it from each tr elements in "#dataTable tbody"

Try this little example it shows you how to bind and unbind an event.
html
<div>
<input id="bind_me"/>
<div>
</div>
</div>
jQuery code
$('#bind_me').on('keypress', function(e)
{
if(e.which==='q'.charCodeAt(0) || e.which==='q'.charCodeAt(0) )
{
$('#bind_me').off('keypress');
}
var tmp = $(this).next().text();
$(this).next().text(tmp+String.fromCharCode(e.which));
});

jQuery .on("change") running more and more times but I only want it to run once

I'm trying to detect changes to input text fields. Whenever the user changes something in an input I want to grab the new value and validate it. My problem is that the code I'm using appears to be running more and more each time. It will detect a change to an input once. But then the next time one input is changed, the code will run twice. Then three times, four times, and so on. What is it that I'm doing wrong?
Here is my HTML:
<div class="input-wrapper">
<input name="clickthru1" type="text" value="input1">
<input name="clickthru2" type="text" value="input2">
<input name="clickthru3" type="text" value="input3">
</div>
And here is my jQuery:
$( ".input-wrapper" ).on( "focus", "input", function() {
console.log("focus on input detected");
$( ".input-wrapper" ).on( "change", "input", function() {
console.log("change to value detected");
});
});
And here is a link to the codepen: http://codepen.io/jimmykup/pen/yYvbzK

That is because you add 'on change' function to stack each time focus event is fired. So just put it out of focus functionality.
$( ".input-wrapper" ).on( "focus", "input", function() {
console.log("focus on input detected");
});
$( ".input-wrapper" ).on( "change", "input", function() {
console.log("change to value detected");
});

Move change event assignment outside of focus event:
$( ".input-wrapper" ).on( "focus", "input", function() {
console.log("focus on input detected");
});
$( ".input-wrapper" ).on( "change", "input", function() {
console.log("change to value detected");
});

Everytime you focus on the input, a new change event handler is added to it. So the first time you focus, you will get one console log, the second time you focus you will get 2 , then 3 and so on.
The solution is to remove the nesting you currently have to only have one function call for each type of event:
$( ".input-wrapper" ).on( "focus", "input", function() {
console.log("focus on input detected");
});
$( ".input-wrapper" ).on( "change", "input", function() {
console.log("change to value detected");
});

Why is this my jQuery keypress() event not working?

I have a text box
<input id="textinput" type="text" name="text_input" value=""/>
and a properly linked (did a console.log in the document ready function and it worked) jquery file
$(document).ready(function()
{
console.log("hi");
});
$( '#textinput' ).keypress(function() {
var tag_text = $('#textinput').val();
console.log("key pressed");
});
As far as I can tell, I'm doing everything properly. However, I am obviously not doing something right.
My goal is to make it so that whenever a letter/character (or any key, really) is pressed with focus on the textinput textbox, an event will trigger.
What am I doing wrong here?

Put the keypress function inside the $(document).ready() function:
$(document).ready(function() {
console.log("hi");
$( '#textinput' ).keypress(function() {
var tag_text = $(this).val();
console.log("key pressed");
});
});
JSFiddle

Try binding the keypress event in the $(document).ready() function. Your code works as intended.
$(document).ready(function() {
$( '#textinput' ).keypress(function() {
var tag_text = $('#textinput').val();
console.log("key pressed");
});
});

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.