Reparem no snippet
abaixo, o "botão" move sozinho para a janela de diálogo quando ela aparece e após clicar em alguma ação da janela, o "botão" some.
function pergunta() {
$('#form').dialog({
resizable: false,
height: 'auto',
width: 400,
modal: true,
title: 'Criar Ticket?',
buttons: {
"Confirmar": function () {
$(this).dialog("close");
obs = prompt('Inserir alguma observação no ticket?');
$('<input/>').attr('type', 'hidden')
.attr('name', "obs")
.attr('value', obs)
.appendTo('#form');
$("#form").submit();
},
"Cancelar": function () {
$(this).dialog("close");
console.log('cancelado');
}
}
});
}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<form action="#" id="form" method="post" accept-charset="utf-8">
<button id="ticket" name="obs" onclick="pergunta()" type="button" style="
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
background-color: transparent;
cursor: pointer;" title="Criar Ticket no Redmine"><img src="https://cdn3.iconfinder.com/data/icons/fatcow/32x32/ruby_add.png" style="height: 32px" alt=""></button>
</form>
Como devo prosseguir nesse caso para que o botão fique no mesmo lugar!?