Question

I have two input fields. The main idea is that whenever you focus to one of the fields, the button click should print a random number inside it.

My problem is that when you just focus on (click on) the first field, then focus on second (or vice versa), the button click prints to both instead of just to the (last) focused field.

You can try to recreate the problem here: http://jsfiddle.net/sQd8t/3/

JS:

$('.family').focus(function(){

var iD = $(this).attr('id');

    $("#sets").one('click',function() {

        var ra = Math.floor((Math.random()*10)+1);

        $('#'+iD).val(ra);


    });

});

HTML:

<center class='mid'>
    <input type="text" class="family" id="father" />
    <br/><br>
    <input type="text" class="family" id="mother" />

    <br/>
    <br/>
    <input type='submit' value='Set text' id="sets"/>
</center>

Answer 1

In the “focus” handler, unbind any existing “click” handler:

$('#sets').unbind('click').one('click', function() { ... });

The way you had it, an additional one-shot “click” handler is bound each time a field gets focus, because jQuery lets you bind as many handlers as you like to an event. In other words, calling .one() does not unbind other handlers. When the click actually happens, all handlers are run.

edit — sorry – “unbind” is the old API; now .off() is preferred.