Question

如何在用jQuery生成的提交按钮替换原始提交按钮后提交此表单？

形式：

<form action="url" method="post" accept-charset="utf-8" class="form horizontal" id="reg">        
     <select name ="type" id="owner">
          <option...>
     </select>
     <div class="controls-actions">
         <button  type="submit" id="sub">Submit</button>
     </div>
</form>

有一个事件监听器可以向表单添加字段：

$('#owner').change(function(){
    if($('#owner').val() == 1){
         $('#owner').after('<input name="added" value="2">');
     }     
})

现在，如果我使用默认提交按钮，则不会发布新字段，因此我尝试使用.submit()：

//remove the old submit button and add new one
$('.control-actions').empty().append('<button id="added">Submit>');

最后为新生成的按钮添加一个事件监听器以提交表单：

$('#added').on('click', function(){
    $('#reg').submit(); 
})

单击新生成的按钮，没有控制台错误，没有表单提交时，没有任何反应。我也尝试过click（），delegate（）等jQuery版本是1.10

Answer 1

更改表单字段后添加其他字段并替换提交按钮，您可以使用委派事件处理新创建的提交按钮。

＆＃13;

$(document).on('click', '#added', function(e) {
  //$('#reg').submit();
  console.log('#added clicked');
})


$('#owner').on('change', function(e){
    if ($('#owner').val() == 1){
        $('#owner').after('<input name="added" value="2">');
        $('.controls-actions').empty().append('<button type="button" id="added">Submit: click me to test</button>');
    }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>


<form action="url" method="get" accept-charset="utf-8" class="form horizontal" id="reg">
    <select name ="type" id="owner">
        <option value=""></option>
        <option value="1">1</option>
    </select>
    <div class="controls-actions">
        <button  type="submit" id="sub">Submit</button>
    </div>
</form>

＆＃13;

Answer 2

试试这个：

    $('.controls-actions').empty();
    $('<button id="added" value="Submit">').appendTo('.controls-actions').bind('click', function() {
         $('#reg').submit(); 
    });

Jquery动态生成提交按钮和字段

2 个答案: