0

アンカー タグがクリックされたときにトリガーされる jQuery をセットアップしました。アイデアは、アンカー タグをクリックするとテキスト ボックスが表示されるということです。私は現在これを機能させています。

私の質問は、テキストボックスが応答しなくなる原因は何ですか? テキストボックスをクリックすると、フォーカスが削除されます。テキストボックスのフォーカスを無効にするクリック機能に何か問題がありますか?

JS Fiddle で思いついたコードは次のとおりです: http://jsfiddle.net/4ZtMH/3/

HTML:

<div class="main" id="143"><a href="#" class="thelink">Test Text Here</a></div>
<br />
<div class="main" id="145"><a href="#" class="thelink">Test Text Here</a></div>

jQuery:

$('.thelink') + $('#143').click(function() {
$('.main') + $('#143').html('<input type="text" id="pername143" /> <input type="button" value="Set Gift" id="submitgiftname" />');
});

$('.thelink') + $('#145').click(function() {
$('.main') + $('#145').html('<input type="text" id="pername145" /> <input type="button" value="Set Gift" id="submitgiftname" />');
});
4

4 に答える 4

0

の後にフィールドにフォーカスを追加し、イベントclickのバインドを解除するだけです。click

$('.thelink') + $('#143').on('click',function () {
    $('.main') + $('#143').html('<input type="text" id="pername143" /> <input type="button" value="Set Gift" id="submitgiftname" />');
    $('#pername143').focus();
    $(this).unbind('click');
});

$('.thelink') + $('#145').on('click',function () {
    $('.main') + $('#145').html('<input type="text" id="pername145" /> <input type="button" value="Set Gift" id="submitgiftname" />');
    $('#pername145').focus();
    $(this).unbind('click');
});

フィドル

于 2013-04-04T19:30:37.917 に答える
0

#143、#145 などにはまだクリック イベントがあるため、入力をクリックすると、含まれている '.main' 要素に対して onclick が再度実行されます。

おそらくこれを試してください：

$('.thelink').click(function() {
    var $container = $(this).closest('.main');
    var container_id = $container.attr('id');
    $container.html('<input type="text" id="pername'+container_id+'" /><input type="button" value="Set Gift" id="submitgiftname" />');
    $('#pername'+container_id).focus();
});

この方法を使用すると、リンクごとに個別の onclick ハンドラが必要ないことに注意してください。

ここに更新されたフィドルがありますhttp://jsfiddle.net/4ZtMH/17/

于 2013-04-04T19:33:07.287 に答える