Question

根据其他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>

奇怪的是，添加字段功能适用于我的浏览器。然而，我将相同的代码放入JSFiddle，它在那里不起作用。删除功能根本不起作用，无论是在我的浏览器中还是在JSFiddle中。我一般都在学习JQuery和Javascript，所以非常感谢帮助我学习的任何帮助。谢谢！

Answer 1

您的代码的第一个问题是使用错误的变量

您已声明var node = "";

但是将其分配给 $ node = '<p><input

并将其附加到$('#inputs').append(node);

node始终为空..但$node包含HTML

其次，您需要委派活动

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

应该是

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

事件将仅绑定到附加evnent时页面上存在的元素。

所以委派活动应解决问题。

<强> Check Fiddle

JQuery .append和.remove似乎并不一致

1 个答案: