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動態生成提交按鈕和字段

回答

相關問題