1

2つの入力フィールドがあります。主なアイデアは、フィールドの1つにフォーカスするたびに、ボタンをクリックするとその中に乱数が印刷されるということです。

私の問題は、最初のフィールドにフォーカス（クリック）してから2番目のフィールド（またはその逆）にフォーカスすると、ボタンのクリックが（最後の）フォーカスされたフィールドだけでなく両方に出力されることです。

ここで問題の再現を試みることができます：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>
4

3 に答える 3

2

「フォーカス」ハンドラーで、既存の「クリック」ハンドラーのバインドを解除します。

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

jQueryを使用すると、イベントに必要な数のハンドラーをバインドできるため、フィールドがフォーカスされるたびに、追加のワンショット「クリック」ハンドラーがバインドされます。つまり、呼び出しによって.one()他のハンドラーのバインドが解除されることはありません。クリックが実際に発生すると、すべてのハンドラーが実行されます。

編集—申し訳ありません—「unbind」は古いAPIです。今.off()が優先されます。

于 2012-09-01T16:49:33.667 に答える
1

変数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 = "";
});
于 2012-09-01T16:57:49.537 に答える
1

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変更が必要なフィールドを含む属性を作成できます。

于 2012-09-01T17:00:41.700 に答える