We Keep Coding

After second triggered function button inside execute code twice

I make a game and I have problem that I cant solve.
I have function and inside I have buttons with .click(). After I execute function for second time buttons clicks execute code twice for example I post here some simple code with same problem.
When I click 1st button alert is triggered once. When I click 2nd and then 1st button alert is triggered twice. I want trigger alert just once. Buttons must stay in function. Sorry for bad English.
Also jsfiddle here https://jsfiddle.net/o2gxgz9r/25237/
function testf() {
$("#1").click(function() {
alert("test");
});
$("#2").click(function() {
testf();
});
}
testf();

You need to unbind the click event before bind,
function testf() {
$("#1").unbind('click');
$("#1").click(function() {
alert("test");
});
$("#2").unbind('click');
$("#2").click(function() {
testf();
});
}
testf();

Somehow this function is binding your event twice. changing anything here removes the issue
$(".address_field").each(function(index){
var widget = new AddressFinder.Widget(this, "WR3NUKVGC4Q97FPHBJXL");

How to disable and re enable the click functionality of a div using Jquery

For this question there are some other related questions which explains the possibility of the re enabling of input field or button using disabled attribute.
But my requirement is for re-enablebing the div click functionality after some action. Currently I'm using .off() for disabling the click function of a div after first click.
But I'm not able to re-enable it back.
Code where div is disabled
$(document).ready(function(){
// Will ask for city through voice when user click on the instruction box.
var accessBtn = $('#skitt-listening-box');
$("#skitt-listening-box").click(function(){
$(this).off('click'); // code to disble div from click
//some functionality
});
});
Code where div is enabled:
if(IsEmail($(".voice_email").val())) {
//some functionality
//Should re-enable the div to click here
});

If I were you i try adding css classes to describe state.
In your way:
$(document).ready(function(){
// Will ask for city through voice when user click on the instruction box.
var $accessBtn = $('#skitt-listening-box');
$accessBtn.click(function(){
if($(this).hasClass('click-available'){
//do action
$(this).removeClass('click-available');
}
});
});
And to enable click:
if(IsEmail($(".voice_email").val())) {
$accessBtn.addClass('click-available');
});

You can use this code:
function addClickFunctionality() {
$("#skitt-listening-box").on('click', function(){
$(this).off('click'); // code to disable div from click
// some functionality
});
}
$(document).ready(function() {
// Will ask for city through voice when user click on the instruction box.
addClickFunctionality();
});
// re-enable click handle in some action
if(IsEmail($(".voice_email").val())) {
// some functionality
addClickFunctionality();
});

Don't show the #loading if the <input> is empty

Demo - jsfiddle.net/75CqW/
When someone clicks the Submit button, it shows the loading div even if the input is empty.
I don't want the user to see the #loading if he didn't write anything in the input, I've tried to add "required" in the input but the #loading is still showing when the input is empty. What do you think is wrong with my loading div?
Thanks in advance.

Instead of click handler use submit handler for the form - the form validation are triggered on form submit not on submit button click
$(function () {
$("#myform").submit(function () {
$("#controller").hide();
$("#loading").show();
});
});
Demo: Fiddle
Note: You might want to prevent the default action of submit event so that the default form submit is prevented - if you are using ajax to do server side processing

try this
var id = $("#statusid").val();
if (id.length == 0)
{
return false;
}

You need to test for a value (or run a validation check) on the field(s) before firing off the processing code
$(function() {
$(".submit").click(function() {
if $('#statusid').val() {
$("#controller").hide();
$( "#loading" ).show();
}
});
});

Dynamically added input to form doesn't validate after first validation

I have a form where I add some inputs dinamically.
Every time the user select another "fornecedor" from addMaterialFornecedor select I add a input for preco.
My problem is that when I click the button and call the validate() function http://js.sapo.pt/SAPO/Ink/FormValidator/doc.html if I selected the "fornecedor"s before I click the button validate the form but if I click the button, selected the "fornecedor"s, and click again it will not validate :s
http://jsfiddle.net/rVQB4/3/
the javascript code I'm using:
function formValidate(form){
if(!SAPO.Ink.FormValidator.validate(form, options)){
//some debug
console.log(form);
return false;
}else{
//some ajax calls
return false;
}
}
Here is a video that exlain better the problem: https://dl.dropbox.com/u/6416035/stack3.ogv
sorry my english :s
thanks :)

Livequery works wonders for items dynamically added to a webpage by binding events to events dynamically added to the DOM. If this binding doesn't take place, events won't fire for those dynamic objects.
Here's an example:
$(document).ready(function() {
$("#myDynamicObject").livequery(function() {
$(this).change(function() {
// Do something.
});
});
});
See here for more information on how to use livequery.

Detecting form changes using jQuery when the form changes themselves were triggered by JS

I have a list of radio buttons that I can toggle "yes" or "no" to using Javascript.
$(document).ready(function(){
$('#select-all').click(function(){
$('#notifications .notif-radio').each(function(){
$('input[type="radio"]', this).eq(0).attr('checked', true);
$('input[type="radio"]', this).eq(1).attr('checked', false);
});
});
$('#deselect-all').click(function(){
$('#notifications .notif-radio').each(function(){
$('input[type="radio"]', this).eq(0).attr('checked', false);
$('input[type="radio"]', this).eq(1).attr('checked', true);
});
});
});
this works just fine. Now I have a separate piece of code that detects when a user has changed something, and asks them if they want to leave the page.
var stay_on_page;
window.onbeforeunload = confirm_exit;
$('.container form input[TYPE="SUBMIT"]').click(function(){
stay_on_page = false;
});
$('#wrapper #content .container.edit-user form').change(function(){
stay_on_page = true;
});
function confirm_exit()
{
if(stay_on_page){ return "Are you sure you want to navigate away without saving changes?"; }
}
The problem is that if the user uses the first piece of functionality to toggle all radio buttons one way or another. The JS detecting form changes doesn't see that the form was changed. I have tried using .live, but to no avail. Anyone have any ideas?

I do something similar to this by adding change() (or whatever's appropriate, click() in your case I suppose) event handlers which set either a visible or hidden field value, then check that value as part of your onbeforeunload function.
So, my on before unload looks like:
window.onbeforeunload = function () {
if ($('#dirtymark').length) {
return "You have unsaved changes.";
}
};
And, or course, dirtymark is added to the page (a red asterisk near the Save button), when the page becomes dirty.