javascript - .on() 接受文本输入以生成另一个输入标签和表单字段

Question

我正在尝试通过表单获取输入，以生成另一个输入字段。

$(document).ready(function(){
    $('.button').click(function(){
        var value = $('#value').val();

        $(document).on('click', '.button', function(){
            $('#form1').append('<input type="text" id="value" value="'        + value + '"><button class="button">Enter</button>');
        });

        return false;
    }); 
});

这在 Chrome 控制台中不会产生错误，但在 JSFiddle 中会出错:

https://jsfiddle.net/yfjda40e/

我没有发现哪些错误？

Answer 1

Use Event delegation and e.preventDefault() to prevent default behavior of button

$(document).on('click', '.button', function(e) {
  e.preventDefault();
  var value = $('#value').val();
  $('#form1').append('<input type="text" id="value" value="' + value + '"><button class="button">Enter</button>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="content">
  <h1>Add field</h1>
  <form id='form1' action="" method='POST'>
    <input type="text" id="value" value="new value">
    <button class="button">Enter</button>
  </form>
</div>

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/app.js"></script>

Fiddle Demo