Tag script is not printed with jQuery

2

I need to print a script using jQuery however, all the code is printed and the script does not, does anyone know how to solve this? Here is the 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);
    
asked by anonymous 29.01.2014 / 16:12

3 answers

3

You do not 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 duplicating 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've put a working example on jsfiddle .

It is also possible to retrieve a jQuery type 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 do not need to set id .

Another approach is to use the on function of jQuery so you do not have to associate the event with the button just created. Example:

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

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

Note : Be careful not to create multiple elements with the same id . This is not good practice and can lead to problems.

    
29.01.2014 / 17:21
1

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 dynamically loaded is to use .on () for delegate the event. So you can use this start code to be that the #botao element 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 better to use class , not to give errors.

    
31.01.2014 / 09:24
0

JQuery does not allow script tags embedded in the html, to achieve something similar, one should 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 well, if you want a quick fix, you should separate the tag from script into the string:

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