Jquery動的に生成された送信ボタンとフィールド

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

、私はデフォルトの送信ボタンを使用する場合、新しいフィールドは掲載されません。グラム

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

最後に、新たにイベントリスナーを追加しますので、私は.submit()を使用してみましたフォームを送信するためにeneratedボタン：

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

何が新しく生成されたボタンがクリックされたときに、何のコンソールエラーが起こりません、no形式の提出。 jQueryのバージョンは1.10です。

Answer 1

フォームフィールドを変更して他のフィールドを追加し、送信ボタンを代用すると、委任イベントで新しく作成された送信ボタンを処理できます。

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

Answer 2

この試してください：あなたは、ボタンを削除し、追加を開始する前に、正確にあなたがしようとしていた何

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