Is it possible to add jquery or javascript code dynamically?

Question

I have this textbox. When a user writes some Jquery code in the textbox and click Apply. I want the code applied to Html page. The code is being appended to body but the generated click function is not working. I have also tried appending the code to HEAD also, click doen't work this way too. Is it possible that it works?

My Html code is

  <span id="clickme">Click Me</span>
  <textarea id="txt">
  $('#clickme').click(function(){
       alert("clicked");
    });
  </textarea>
  <button id="apply">Apply</button>

My Jquery is

  $(document).ready(function(){
  $(document).on('click','#apply',function(){
  var code=$('#txt').val();
  $('body').append('<script type="text/javascript">'+code+'</script>');

  });
  });

I have no idea of eval. Can you help me with this code, if i wanted to do it in Jquery? — Manish
– Manish, Commented Oct 14, 2013 at 18:41
Your jQuery code, where is it? In the page or in separate file? — Serge Seredenko
– Serge Seredenko, Commented Oct 14, 2013 at 18:44
@Serge I have tried both ways. On the page & separate file. Not working — Manish
– Manish, Commented Oct 14, 2013 at 18:46
@Manish you might be better off doing what zzzzBov mention and use eval. You can try something like this: eval($('#txt').val()); That should execute whatever was typed into the text box on the apply button click. I would also highly recommend you wrap the eval statement in a try catch to prevent issues with miss typed code. — StMotorSpark
– StMotorSpark, Commented Oct 14, 2013 at 18:50

zzzzBov · Accepted Answer · 2013-10-14 18:49:57Z

3

As a note, typically eval is considered evil. That's because it's often (ab)used when it's the wrong tool for the job. In this case, however, you simply want to run some ambiguous code, which means you're already giving control of your page directly to the user.

eval evaluates JavaScript code directly as a string. There's no reason to try to add it to the page as a script element, when you could simply call:

$(document).on('click', '#apply', function () {
    try {
        eval($('#txt').val());
    } catch (ex) {
        //might as well report to the console what went wrong
        window.console&&console.error(ex.message);
    }
});

answered Oct 14, 2013 at 18:49

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Serge Seredenko · Accepted Answer · 2013-10-14 18:54:02Z

1

Are you sure you included jquery itself in your page? I copypasted your code and it works http://jsfiddle.net/2R8wX/

(Except I added <body> and split </script>)

answered Oct 14, 2013 at 18:54

Serge Seredenko

3,5517 gold badges24 silver badges41 bronze badges

1 Comment

zzzzBov Over a year ago

It should also be noted that older versions of jQuery won't allow you to inject <script> elements and have them execute.

Collectives™ on Stack Overflow

Is it possible to add jquery or javascript code dynamically?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related