How to execute jquery / javascript code inside .html () jquery

Question

Inside jQuery.html (), I want to execute the following script.

$("#row1").html("<td id="cellId"><script>if (selectedStr) {var elem = $(\"#cellId\"); $(elem).bind(\"onRefresh\", function() {loadColor(selectedStr); storeStr(selectedStr);});$(elem).trigger(\"onRefresh\");) }</script><td>") 

Demand:

I had testPage.jsp which contains a table with cells. When a specific cell is selected and the submit button is pressed, a pop-up window opens. On the pop-up page, some data is modified and processed through ajax. The resulting ajax response should be dynamically tuned to the parent line. The ajax response creates all the content that needs to be installed. This is where I fail. Ajax's answer would be something like this. <td>.....<td> <td>.....<td> <td>content<script>...</script></td> <td>.....<td> <td>content<script>...</script></td> ... Also, "selectedStr" is a global javascript variable in testPage.jsp.

Problems: 1. "selectedStr is undefined" is a browser error message. I could not get a reference to the global variable. 2. Linking elements does not occur.

I tried using jQuery.getScript (), jQuery.globalEval, jQuery.eval. I could not understand the {{html}} jQuery.

Thanks!

Answer 1

Instead of putting everything in a script, create your element in memory, and then add event handlers to it before adding it to the DOM.

 $td = $("<td></td>").attr("id", "cellId") .bind("onRefresh", function() { if (selectedStr) { loadColor(selectedStr); storeStr(selectedStr); } }) .trigger("onRefresh"); $("#row1").html($td); 

Also, be careful when adding multiple td elements with the same identifier.

Answer 2

You should create html like this:

 var newRow = $('<tr/>').bind('onRefresh',function(){ {code} }); $("#row1").append(newRow); 

or

 $("#row1").html(newRow); 

but I really don’t understand how exactly it should work on your page

Answer 3

If you want to populate html based on javascript output, you should use the function as a parameter for jQuery.html (). See below.

 $("#row1").html(function (index, oldHTML){ var elem = $(this); //This is where you could run your if and other functions //formulate the new html //then just return it to set the html return newHTML; }); 

Also, for more detailed examples, read jQuery.html () api

Answer 4

What I do when I need it is to define a hidden div in dynamic content:

 <div id="afterAjax" style="display:hidden"> if (selectedStr) { var elem = ... etc... </div> 

Please note that I do not have a <script> .

Then, after ajax (or after you pasted it into your HTML:

 eval($('#afterAjax').html()); 

Update

Here is a fiddle that shows that this works - I don’t know why someone postponed my answer. :( I use this when I need to do this.

The code in the fiddle is simple:

 $('body').append('<div id="test">test</div><div id="afterAjax" style="display:none">alert("works");</div>'); eval($("#afterAjax").html()); 

http://jsfiddle.net/mhart/y22r5/3/