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

如何在用jQuery生成的提交按钮替换原始提交按钮后提交此表单？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>');

最后事件侦听器添加到新摹enerated按钮提交表单：点击新生成的按钮时

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

什么也没有发生，没有控制台错误，不提交表单。我也试过点击（），委托（）等jQuery版本是1.10

来源

2017-02-21 Kisaragi

究竟是你想你开始删除和添加按钮之前做什么？因为听起来你有[XY问题]（http://meta.stackexchange.com/q/66377/194720），解决原始问题会更有益。 –

@mike：在保留提交按钮的同时向表单添加动态字段，也就是说，表单在被点击之前不会被提交。动态字段可能包含用户输入。 – Kisaragi

如果这是你的实际代码，那么'$（'.control-actions'）'不匹配任何东西，因为这个类是“controls-actions”。 –

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

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

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

来源

2017-02-21 18:46:15 gaetanoM

问题中的错字将更新。我已经混合了ID。 – Kisaragi

@Kisaragi对！尝试使用委托事件。答案已更新。 – gaetanoM

试试这个：

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

来源

2017-02-21 19:10:16

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

回答

相关问题