Estou criando uma extensão que adiciona uma <div na página atual na frente da <div id="formulario">, mas quando clico no código não add.
Código HTML da extensão do google chrome (popup.html):
<a href="#" data-id="1" id="adicionarCampo">+ adicionar campo</a>
<form method="POST" action="gerarpdf.php" target="_blank">
<div id="formulario">
<input type="text" placeholder="Nº do Documento"/>
</div>
</form>
--------------------------------------------------------------------------------------------
Código JS:
$(function () {
var divContent = $('#formulario');
var botaoAdicionar = $('a[data-id="1"]');
var i = 1;
//Ao clicar em adicionar ele cria uma linha com novos campos
$(botaoAdicionar).click(function () {
$('<div class="conteudoIndividual"><input type="text" placeholder="Nº do Documento" maxlength="6" name="numeroDocumento' + i + '" required/><a href="#" class="linkRemover">- Remover Campos</a></div>').appendTo(divContent);
$('#removehidden').remove();
i++;
$('<input type="hidden" name="quantidadeCampos" value="' + i + '" id="removehidden">').appendTo(divContent);
});
//Cliquando em remover a linha é eliminada
$('#formulario').on('click', '.linkRemover', function () {
$(this).parents('.conteudoIndividual').remove();
i--;
});
});
------------------------------------------------------------------------------------------------
Se eu usar esses códigos normal, funciona.
Na extensão que eu criei não. É como se não soubesse a página que é pra alterar, sei lá...
Alguém tem uma ideia aí?