0

目標は、最後のテキスト行に注目すると、その下に別のテキスト行が表示されることです。次に、特定の行数でこれを無効にします。ここで何が間違っているのかわかりません：

$(document).ready(function() {
    lineCount = 0;
    $("form#qc").delegate("input:text:last-child", "focus", newTextLine);
});

function newTextLine() {
    newLine = ("<div id='ansInput{0}'>Answer {0}: <input type='text' name='ans1' /></div><!--ans1-->").format(lineCount);
    currentDiv = ("#ansInput{0}").format(lineCount);
    $(currentDiv).after(newLine);
    lineCount = lineCount++;
}

これは HTML ページです。

<form id="qc" name="qc">
<h2>Create New Question!</h2>
<div id="ansInput0">Question: <input type="text" name="Question" /></div><!--question-->
<input type="submit" value="Submit" />
</form>

非常に奇妙な結果が得られます: 2 つの行が表示され、すべての行にインデックスが0あり、すべてが最後の行に対してのみ機能すると思われるイベント ハンドラーに応答するたびに...コードの何が問題なのですか?

JSフィドル

また、コードをよりスマートにする方法についてのアドバイスも大歓迎です!

4

2 に答える 2

1

すでに述べたように、コードにはいくつかの問題があります。私は次のように試してみます：最後のdivのクローンを作成し、IDを変更し、入力の値をクリアします。

$(function() {
    $("#qc>div:last-of-type>input").live('focus', function() {
        $(this).parent().after($(this).parent().clone().attr('id', 'ansInput' + $('#qc>div').length).find('input').val('').end());
    });
});

http://jsfiddle.net/7enNF/1/

  • input：text：last-childは、親の最後の子要素である入力を選択します。したがって、すべての入力が選択されます。これは、各入力がansInput div内の唯一の（したがって最後の）子であるためです。
  • #qc> div：last-of-type> inputは、最後のdivの入力を選択します。送信ボタンがフォームの最後の子であるため、last-childがdivと一致しないため、last-of-typeを使用しました
  • divを選択し、「find（'input'）」で入力を選択して値をクリアするため、最後が必要です。そのままにしておくと、入力のみが挿入されます（divは挿入されません）。したがって、end（）は、入力からdivに戻り、divが挿入されるようにします。

これがあまり混乱していなかったといいのですが！:)

于 2011-05-27T16:45:00.687 に答える
0

ここにはいくつかの問題があります。まず第一に、あなたが提供したコードに基づいて、あなたの lineCount 変数のスコープがわかりません。次に、作成している新しい要素にイベント ハンドラーを追加しているからといって、古い要素からイベント ハンドラーを削除しているわけではありません。

于 2011-05-27T16:39:56.207 に答える