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

使用Event delegation和e.preventDefault()来阻止button
的默认行为

＆＃13;

$(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>');
});

＆＃13;

<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>

＆＃13;

.on（）采用文本输入来生成另一个输入标签和表单字段

1 个答案:

Fiddle Demo