1

これに関する他のstackoverflowの投稿によると、これはうまくいくはずです。しかし、そうではありません。これがコードです。テストのためだけにかなり基本的です。

HTML: 

    <form>
        <div id="inputs">
            <p><input type="text" id="user" /></p>

        </div>
        <hr />
        <input type="button" value="Add Another Row" class="add" id="add" >
    </form>

そしてJQuery：

<script>
  $(function() {
    var node = "";
    var count = 0;

    $('#add').on('click', function() {
    $node = '<p><input type="text" id="' + count + '"><a href="#" class="remove">Remove Number' + count + '</a></p>';
    count++;
    $('#inputs').append(node);
  });

  $('.remove').on('click', function() {
    $(this).parent().remove();
    return false;
    });
  });

 </script>

奇妙なのは、Add Field 機能が私のブラウザで動作することです。それでも、同じコードを JSFiddle に入れましたが、そこでは機能しません。ブラウザでも JSFiddle でも、削除機能がまったく機能しません。私はまだ一般的にJQueryとJavascriptを学んでいるので、私が学ぶのを助ける手助けがあれば大歓迎です. ありがとう！

4

1 に答える 1

3

コードの最初の問題は、間違った変数の使用です

あなたは宣言しました var node = "";

しかし、それを$nodeに割り当てる = '<p><input

そしてそれをに追加する$('#inputs').append(node);

node常に空です..しかし$node、HTML

次に、イベントを委任する必要があります 

$('.remove').on('click', function() {

察するに

$('#inputs').on('click', '.remove',  function() {

イベントは、イベントが添付された時点でページに存在する要素にのみバインドされます。

したがって、イベントを委任すると問題が解決するはずです。

フィドルをチェック

于 2013-06-17T23:36:43.280 に答える