Tag script is not printed with jQuery

Question

I need to print a script using jQuery however, all the code is printed and the script is not, does anyone know how to solve it? Follow code below:

codigo = '<div id="teste"><input type="submit" id="botao" value="Send" /><script>$("#botao").click(function() { alert("test"); });</script></div>';
$('#iframe5').parent().after(codigo);

Answer 1

You don’t need to "inject" the Script that way. In fact, this can create problems if the selector picks up more than one element in the frame by doubling the 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"); });

I put a working example on jsfiddle.

It is also possible to retrieve a jQuery reference for the created elements and then add the Listener to the button:

//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);

The advantage of this is that you don’t need to pin a id.

Another approach is to use the function on jQuery to not need to associate the event to the newly created button. Example:

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

Running the above code once at page startup will work for any element with id botao created at any time.

Note: take care not to create multiple elements with one id. This is not good practice and can lead to problems.

Answer 2

The best solution here is to create a new element script with pure javascript and make append to the element you want.

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

Another solution for elements that are loaded dynamically is to use the .on() to delegate the event. So you can use this starting code to be need the element #botao is already loaded.

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

Note that if you add multiple buttons, you have to give them a unique ID. Or else better use class, not to make mistakes.

Answer 3

Jquery does not allow embedded script tags in html, to achieve something similar, one must use pure javascript:

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

or you can use another function like innerHtml to embed scripts.

Edited

Some browsers do not handle this situation well, if you want a quick solution, you should separate the tag from script in string:

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