Question

I am using jscript to insert HTML.

function pluginOrderTotals(OrderTotals) {
var orderTotalsHTML = "";
if (OrderTotals != "") {
    orderTotalsHTML = "<a id='OrderTotals' href=''>Order Totals</a><p id='OrderTotalText'>" + OrderTotals + "</p><script>$('#OrderTotals').click(function () {          $('#OrderTotalText').toggle('fast');});";
}
document.getElementById("pluginWidgets2Div").innerHTML = orderTotalsHTML;}

The HTML part of the variable is passed just fine, but the JQuery animations do not work. If I hard code this in the HTML like below the animations work fine.

    <div id="pluginWidgets2Div">
        <a id="OrderTotals" href="">Order Totals</a>
            <p id="OrderTotalText">Hiya<br />
            Such interesting text, eh?</p>
        <a id="FreightView" href="">View Freight</a>
            <p id="FreightViewText" style="display: none">Hiya<br />
            Such interesting text, eh?</p>
        <a href="">Another (3)</a>
        <a href="">Menu item 4</a>
        <a href="">One more (5)</a>
        <script>
        $("#OrderTotals").click(function () {
        $("#OrderTotalText").toggle("fast");
        });
        $("#FreightView").click(function () {
        $("#FreightViewText").toggle("fast");
        });
        </script></div>

Thanks for your help.

Answer 1

.innerHTML doesn’t execute script elements. You can use .html() in jQuery …

Or do the sensible thing which is just running that code directly:

function pluginOrderTotals(OrderTotals) {
    var orderTotalsHTML = "";
    if (OrderTotals != "") {
        orderTotalsHTML = "<a id='OrderTotals' href=''>Order Totals</a><p id='OrderTotalText'>" + OrderTotals + "</p>";
    }
    document.getElementById("pluginWidgets2Div").innerHTML = orderTotalsHTML;
    $('#OrderTotals').click(function () {
        $('#OrderTotalText').toggle('fast');
    });
}