2

Eu preciso imprimir um script utilizando jQuery porém, todo o código é impresso e o script não, alguem sabe como resolver isso? Segue código abaixo:

codigo = '<div id="teste"><input type="submit" id="botao" value="Send" /><script>$("#botao").click(function() { alert("test"); });</script></div>';
$('#iframe5').parent().after(codigo);
1
  • Se você tiver utilizando algum CMS, pode ser que o mesmo impeça inserir tags script diretamente na página. Commented 29/01/2014 às 15:21

3 Respostas 3

3

Você não precisa "injetar" o Script dessa forma. Na verdade, isso pode criar problemas se o seletor pegar mais de um elemento no frame, duplicando os listeners.

//código html a ser injetado na página
var codigo = '<div id="teste"><input type="submit" id="botao" value="Send" /></div>';

//insere o elemento no local adequado
$('#iframe5').parent().after(codigo);

//adicione um handler no botão adicionado pelo ID
$("#botao").click(function() { alert("test"); });

Coloquei um exemplo funcional no jsfiddle.

Também é possível recuperar uma referência do tipo jQuery para os elementos criados e então adicionar o listener ao botão:

//transforma código html a ser injetado na página em elementos reais com o jQuery
var codigo = $('<div id="teste"><input type="submit" id="botao" value="Send" /></div>');

//localiza o botão a adiciona o listener
codigo.find('input').click(function() { alert("test"); });

//insere o elemento no local adequado
$('#iframe5').parent().after(codigo);

A vantagem disso é que você não precisa fixar um id.

Outra abordagem é usar a função on do jQuery para não precisar associar o evento ao botão recém criado. Exemplo:

$(document).on("click", "#botao", function() { alert("test"); });

Executando o código acima uma única vez na inicialização da página irá funcionar para qualquer elemento com id botao criado a qualquer momento.

Nota: tome cuidado para não criar vários elementos com um mesmo id. Isso não é uma boa prática e pode levar a problemas.

1

A melhor solução aqui é criar um novo elemento script com javascript puro e fazer append para o elemento que você quer.

var script = document.createElement( "script" );
script.type = "text/javascript";
script.src = "scriptname.js";
$("#teste").append(script);

Outra solução, para elementos que são carregados dinamicamente é usar o .on() para delegar o evento. Assim você pode usar este código logo de inicio ser precisar que o elemento #botao já esteja carregado.

$(document).on('click', "#botao", function() { alert("test"); });

Note que se você acrescentar vários botões, têm de lhes dar um ID único. Ou então melhor usar class, para não dar erros.

0

O JQuery não permite tags de script embutidas no html, para conseguir algo similar, deve-se usar javascript puro:

var script = document.createElement( "script" );
script.type = "text/javascript";
script.src = "scriptname.js";
$("#temp").append(script);

ou você pode utilizar outra função como innerHtml para embutir scripts.

Editado

Alguns navegadores não lidam bem com essa situação, se quiser uma solução rápida, deve-se separar a tag de script na string:

$("#leaderBoard").html('<sc'+'ript language="javascript1.1">alert(1);</sc'+'ript>');

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .