Function append vs javascript

Question

I have a page that generates a form dynamically using append('texto html');

These inputs that I Gero after loading the page completely, I cannot by them invoke functions js created in the page ready, ie before the inputs exist.

ex: create a form with name and Cpf and save button using append.

In my script there is already a method salvar(){} and when I create the button on onclick, I call save(), but it doesn’t work. I think because the input was created after the page load. There is something you can do to fix this?

<script type='text/javascript'>
                    $( document ).ready(function() {

$('#confirm_edit').click(function(){

 $('#form_execucao').append('<br class=\"campos bts\" /><br class=\"campos bts\" />');
                                $('#form_execucao').append('<label id=\"bt_print\" name=\"bt_print\" onclick=\"pt()\" style=\"margin-left:5px; height:30px; font: normal 13px Verdana, Arial, Times;\" for=\"salvar\" class=\"btn btn-primary campos bts\"><i class=\"glyphicon glyphicon-print\"></i> Imprimir</label>');
                                $('#form_execucao').append('<label id=\"bt_salvar\" name=\"bt_salvar\" onclick=\"sv()\" style=\"margin-left:10px; height:30px; font: normal 13px Verdana, Arial, Times;\" for=\"salvar\" class=\"btn btn-info campos bts\"><i class=\"glyphicon glyphicon-floppy-disk\"></i> Salvar</label>');

});

                    function pt(){
                        alert('imprimindo');
                    }

                    function sv(){
                        alert('salvando');    
                    }

 });
</script>

Answer 1

Your code contains errors, so it doesn’t work.

1. Take the escape bars " from append. Not necessary since you are using simple quotes as delimiter.

2. It’s not necessary $(document).ready(function(){}. The .click() will normally be assigned on page loading.

Your code would look like this:

$('#confirm_edit').click(function(){
	$('#form_execucao').append('<br class="campos bts" /><br class="campos bts" />');
	$('#form_execucao').append('<label id="bt_print" name="bt_print" onclick="pt()" style="margin-left:5px; height:30px; font: normal 13px Verdana, Arial, Times;" for="salvar" class="btn btn-primary campos bts"><i class="glyphicon glyphicon-print"></i> Imprimir</label>');
	$('#form_execucao').append('<label id="bt_salvar" name="bt_salvar" onclick="sv()" style="margin-left:10px; height:30px; font: normal 13px Verdana, Arial, Times;" for="salvar" class="btn btn-info campos bts"><i class="glyphicon glyphicon-floppy-disk"></i> Salvar</label>');
	});

function pt(){
	alert('imprimindo');
}

function sv(){
	alert('salvando');    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<input type="button" value="ok" id="confirm_edit" />
<div id="form_execucao"></div>

Answer 2

You have to bind in the line below the append by turning on the button with the already created function

$(document).ready(function() {
  function save() {
    alert('Save!');
  }

  $('#append').click(function(){
    var btn = '<button id="salvar">Salvar</button>'
    $('#container').html(btn);
    $('#salvar').click(save);
  })
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>