CODEWITHSUNDEEP
javascriptjquery
Biker John
Biker John

Reputation: 2711

JQuery focus to previous clicked input bug

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>

Upvotes: 1

Views: 177

Answers (3)

Oriol
Oriol

Reputation: 288260

See http://jsfiddle.net/sQd8t/11/

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

    $("#sets").attr('data-target',$(this).attr('id'))

});

$("#sets").click(function() {

    var target=$(this).attr('data-target');

    if(target){

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

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

    }

});

You can create a data-target attribute which contains the field which must be modified.

Upvotes: 1

user1626664
user1626664

Reputation: 313

Put the variable iD outside, and separate the functions:

http://jsfiddle.net/sQd8t/8/

This prevents from adding too many events on each input click/focus. No need to unbind.

var iD;
$('.family').focus(function() {
    iD = $(this).attr('id');
});

$("#sets").on('click', function() {
    var ra = Math.floor((Math.random() * 10) + 1);
    if (iD!="")$('#' + iD).val(ra);
    iD = "";
});

Upvotes: 1

Pointy
Pointy

Reputation: 413747

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.

Upvotes: 2

Related Questions