Question

我有两个输入字段。主要思想是，无论何时聚焦到其中一个字段，按钮单击都应在其中打印一个随机数。

我的问题是，当你只是专注于（点击）第一个字段，然后专注于第二个字段（反之亦然）时，按钮单击会打印到两个而不是仅显示到（最后一个）聚焦字段。

您可以尝试在此处重新创建问题：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

在“焦点”处理程序中，取消绑定任何现有的“点击”处理程序：

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

您拥有它的方式，每次字段获得焦点时，都会绑定一个额外的一次性“单击”处理程序，因为jQuery允许您将任意数量的处理程序绑定到事件。换句话说，调用.one()并不解除其他处理程序的绑定。当实际发生点击时，所有处理程序都会运行。

编辑 - 抱歉 - “unbind”是旧的API;现在.off()是首选。

Answer 2

将变量iD放在外面，并将函数分开：

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

这可以防止在每个输入点击/焦点上添加太多事件。无需解开。

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

Answer 3

请参阅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);

    }

});

您可以创建一个data-target属性，其中包含必须修改的字段。

JQuery专注于之前点击的输入错误

3 个答案: