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");

Is it discouraged to use "onlclick" with HTML element while using "addEventListener" method?

Before I explain my question, this piece of code is going to be considered:
HTML:
<div>
<button type="button" id="btn" onclick="disAl()">Click</button>
</div>
JS:
function disAl(){
var x = document.getElementById("btn");
if(x.addEventListener){
x.addEventListener("click", altTxt);
}
else if (x.attachEvent){
x.attachEvent("onclick", altTxt);
}
}
function altTxt(){
alert("Hello");
}
Now, if I run the program and click the button first time, nothing happens. However, from the second click the alert pops up. Interestingly enough, when I remove onclick="disAl()" from button element, and also remove the function definition from the script, the problem gets fixed. Like the following:
var x = document.getElementById("btn");
if (x.addEventListener) {
x.addEventListener("click", altTxt);
}
else if (x.attachEvent) {
x.attachEvent("onclick", altTxt);
}
function ...
....
So does it mean onclick="disAl()" method is unnecessary in my case?

Here is what is happening:
First time: Because of this part onclick="disAl()", you are setting up button click handler to a function called disAl(). Due to this, you get inside the function disAl() when you click the button.
When inside, you are again setting up click event handler to altTxt. This causes two handlers to be chained to click event. Then when you click second time, let's see what happens.
Second time: Now when the click happens, first disAl() is called which again unnecessarily sets up altTxt as click event handler. Once this handler is over, altTxt is called and that is when you see the alert.
Second case when you remove the function:
In this case, you are setting up button click event handler when your page is loaded since it is not a function anymore. So when you click the button, you call altTxt and see the alert.
So, yes disAl() is unnecessary in your case. Also, as a good practice, event handlers should not be set in the html but they should be set in the code by addEventListener. This allows you to remove event listener if you so desire by calling removeEventListener().
Hope this helps!

Yes you are right you are selecting document by jquery and writing event listener on it so you can just use like following.
function altTxt(){
alert("Hello");
}
var x = document.getElementById("btn");
if (x.addEventListener)
{
x.addEventListener("click", altTxt);
}
else if (x.attachEvent)
{
x.attachEvent("onclick", altTxt);
}

How to run function when input is disabled or reenabled

Is there some way to run a function when a input is disabled/enabled from another part of the code, for example when this code is run:
$('#myinput').prop('disabled', true);
I want another part of the code to be notified about this, but without making it dependent on the other part. Something similar to how "change" event works. But there's no "disabled" event...

You can call notification trigger in the next line with an if statement
document.getElementById("email").disabled=true;
if(document.getElementById("email").disabled == true)
{
alert("Notifying..");
//call the trigger function
}

There is no event that will trigger when those properties are changed.
You can do this some other way.
Set hidden field for this enable disabled value like 1 / 0
$("#hiddenid").trigger("hiddenidchange");
$("#hiddenid").on("hiddenidchange", function () {
});
refer How do I trigger an onChange event for a hidden field?

Create onchange event with javascript in Firefox

I've been working on trying to trigger an onchange listener with java script in Mozilla Firefox. I've found a lot on Stack Overflow posted about this, but nothing seems to be working for my unique case.
I've created this HTML with a onchange listener from an onchange event using this helpful post (JavaScript OnChange Listener position in HTML markup). Here's my code:
<HTML>
<head>
<script type="text/javascript">
window.onload= function () {
if(window.addEventListener) {
document.getElementsByClassName('search-box')[0].addEventListener('change', loadXMLDoc, false);
} else if (window.attachEvent){
document.getElementsByClassName('search-box')[0].attachEvent("onchange", loadXMLDoc);
}
function loadXMLDoc(){
alert('It worked');
}
}
function addTextCallListener() {
var searchBox = document.getElementsByClassName("search-box")[0];
searchBox.value = "Hello";
}
</script>
</head>
<BODY>
<input type="text" class="search-box" placeholder="Player Search">
<br \>
<button type="button" onclick="addTextCallListener()">Click Me!</button>
</BODY>
</HTML>
I also saved it as this jsfiddle (for some reason I had to keep it all together for it to work, I couldn't break it up into js and html).
https://jsfiddle.net/josephfedor42/crogL0zd/1/
If you play with this jsfiddle you can see that entering text and pressing enter will trigger the listener and the pop up with the message “It worked” will appear.
But if the button “Click Me!” is pressed it only changes the value of the text box, and the onchange listener is not called.
I realize I could easily add an onchange event to this button. But I want to to trigger the listener by programatically/ superficially using javascript in my addTextCallListener() function.
I've tried the simple stuff, like calling
searchBox.onchange();
searchBox.focus();
searchBox.click();
And a combination of these to add and remove the focus. But it doesn't seem to work. I've found quite a few posts on triggering an onchange event, but nothing that works in Firefox.
Any help would be appreciated.
Thanks for that link of a possible duplicated question. I had checked out that link before.
But I gave it a try again. I saved the jsfiddle from them both and neither one work.
My implementation of Dorian's answer
https://jsfiddle.net/josephfedor42/zaakd3dj/
My implementation of Alsciende's answer
https://jsfiddle.net/josephfedor42/xhs6L6u2/

emphasize mine
According to the mdn page about the change event,
The change event is fired for <input>, <select>, and <textarea>
elements when a change to the element's value is committed by the
user.
and to whatwg specs :
When the input and change events apply (which is the case for all
input controls other than buttons and those with the type attribute in
the Hidden state), the events are fired to indicate that the user has
interacted with the control.
Therefore, setting the value of an input is not an action "committed by the user" nor a sign that "the user has interacted with the control", since it was made by the code.
So, even if the specifications for this event are kind of unclear, the event should not fire when you change its value by code.

Something like this should work:
function addTextCallListener() {
var searchBox = document.getElementsByClassName("search-box")[0];
searchBox.value = "Hello";
//fire the event
if (document.createEvent) {
searchBox.dispatchEvent('change');
} else {
searchBox.fireEvent("onchange");
}
}

Here is the code I needed to add to my function addTextCallListener:
var evObj = document.createEvent('HTMLEvents');
evObj.initEvent( 'change', true, true );
searchBox.dispatchEvent(evObj);
I updated the jsfiddle. The working code is here https://jsfiddle.net/josephfedor42/crogL0zd/7/

Replace onchange with change in this part:
document.getElementsByClassName('search-box')[0].attachEvent("onchange", loadXMLDoc);

Submit shouldn't blur textarea with jQuery?

I have a textarea with a blur function:
$("#comment").blur(function() {
...something
});
I don't want this blur() to happen when I click on the submit button below. How can I solve this?

Have you tried taking a look at When onblur occurs, how can I find out which element focus went *to*? -- it should help in this case so you can determine whether to fire the 'blur' function or not based on where the focus went to

a normal submit is a PAGE REFRESH
So: when your page loads again, the blur() code will get called as well

In your submit pass a variable back to the server in the form that indicates that it was a form submit (ie a meaningful flag). When you re-render the page render it with the flag, stating it was a form submit, in javascript. Look for that flag in your blur handler, clear it, and return false.

Something like this should work:
var _commentBlurTimer = 0;
$("#comment").blur(function() {
_commentBlurTimer = window.setTimeout(function() {
//...something
}, 500);
});
$("input[type=submit]").click(function() {
if (_commentBlurTimer)
window.clearTimeout(_commentBlurTimer);
});
Test case: http://jsfiddle.net/yahavbr/a9xZW/