0

ページのフォームにフィールドを追加する以下のスクリプトがあります。新しいフィールドが生成されたときにフォーカスを設定する必要がありますが、どうすればよいかわかりません。

HTML：

<input type="button" onclick="javascript:;" id="addRow" value="Add Field" style="margin-bottom: 10px;">

Javascript：

var $j = jQuery.noConflict();
$j(document).ready(function(){
$j(function(){
    var rows = 1;
    $j('#addRow').click(function(){
        $j('#nameRows').append('<div class="nameRow"><input type="text" name="names['+rows+'][name]" value="" /><a href="javascript:;" class="removeRow">Remove</a>');
        rows++;
    });
    $j(document).on('click', '.removeRow', function(){
        $j(this).closest('.nameRow').remove();
    });
});
});
4

4 に答える 4

5 
$j('#addRow').click(function(){
    $j('#nameRows').append('<div class="nameRow"><input type="text" name="names['+rows+'][name]" value="" /><a href="javascript:;" class="removeRow">Remove</a>');
    $j("#nameRows input:last").focus();
    rows++;
});
于 2012-12-20T19:47:17.090 に答える
4

使用append()しているので、追加された要素が最後になります。したがって、次を使用できます。

$j('#nameRows :input:text:enabled:visible:last').focus();

完全なクリックイベントバインディングは次のようになります。

$j('#addRow').click(function(){
    $j('#nameRows').append('<div class="nameRow"><input type="text" name="names['+rows+'][name]" value="" /><a href="javascript:;" class="removeRow">Remove</a>');
    $j('#nameRows :input:text:enabled:visible:last').focus();
    rows++;
});

非表示、無効、および非テキスト入力要素を除外するためにセレクターを追加したことに注意してください。また、セレクターIMHOとして:inputよりも優れています。inputHTH

于 2012-12-20T19:48:31.703 に答える
1

要素を追加し、新しく追加された要素にフォーカスを設定することができます。

$j('#addRow').click(function(){
    $j('#nameRows').append('<div class="nameRow"><input type="text" name="names['+rows+'][name]" value="" /><a href="javascript:;" class="removeRow">Remove</a>');
    $('#nameRows input:last').focus();
    rows++;
});
于 2012-12-20T19:48:39.957 に答える
0

新しい要素を参照し、focusメソッドも適用します。

$j(document).ready(function()
{
//$j(function(){ no need for a second ready callback inside the first...
    var rows = 1;
    $j('#addRow').click(function()
    {
        $j('#nameRows').append('<div class="nameRow"><input type="text" name="names['+rows+'][name]" value="" /><a href="javascript:;" class="removeRow">Remove</a>');
        $k('#nameRows').find('input:last-child').focus();//<-----
        rows++;
    });
    $j(document).on('click', '.removeRow', function()
    {
        $j(this).closest('.nameRow').remove();
    });
});

それで全部です。document.createElementを使用して、それをどこかの変数に割り当てることもできます。これにより、新しく作成された要素の参照も準備できます。

于 2012-12-20T19:50:12.353 に答える