innerHTML = HTML & JQuery, JQuery doesn't execute

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.

You forgot to close the <script> tag in your insert.

Sirko
– Sirko

2012-06-07 15:08:08 +00:00
Commented Jun 7, 2012 at 15:08 — Sirko
– Sirko, Commented Jun 7, 2012 at 15:08

Esailija · Accepted Answer · 2012-06-07 15:08:10Z

4

.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');
    });
}

answered Jun 7, 2012 at 15:08

Esailija

140k24 gold badges280 silver badges328 bronze badges

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

5 Comments

Surreal Dreams Over a year ago

If you add HTML to the DOM dynamically, will that jQuery execute for the click event?

Esailija Over a year ago

@SurrealDreams I don't understand your question, jQuery executing click event has nothing to do with adding html dynamically.

Surreal Dreams Over a year ago

It may be that adding the .click() after adding the HTML is OK. If you ran that .click() method in the jQuery .ready() function, it would not work because the target isn't in the DOM. If you add it to the DOM after you add the HTML you are probably OK. I tend to us the .on() method so that the events are primed and ready for whenever the HTML is modified.

Esailija Over a year ago

@SurrealDreams yes if the jQuery element set is empty, adding events will not do anything and it just fails silently. Here I know the set won't be empty because I just added an element with the id to the dom

jwdv22 Over a year ago

@Esailija That worked. I knew it was something small. I just did the sensible thing ;) like you said. Thanks so much

pimvdb · Accepted Answer · 2012-06-07 15:16:56Z

1

There's a nice unobtrusive way to have this code waiting in the wings so that it will work. When inserting the HTML, skip the JavaScript - handle it separately.

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;
}

$(document).ready(function(){
    $("#pluginWidgets2Div").on("click", "#OrderTotals", function () {
        $("#OrderTotalText").toggle("fast");
    });
});

The jQuery will apply to the HTML if/when it's inserted, and your HTML doesn't need to have any JavaScript in it.

edited Jun 7, 2012 at 15:16

pimvdb

155k80 gold badges313 silver badges357 bronze badges

answered Jun 7, 2012 at 15:14

Surreal Dreams

26.4k4 gold badges49 silver badges61 bronze badges

Comments

BenM · Accepted Answer · 2012-06-07 15:08:02Z

0

You haven't closed the <script> tag:

orderTotalsHTML = "<a id='OrderTotals' href='#'>Order Totals</a><p id='OrderTotalText'>" + OrderTotals + "</p><script>$('#OrderTotals').click(function () {  $('#OrderTotalText').toggle('fast');});</script>";

answered Jun 7, 2012 at 15:08

BenM

53.3k26 gold badges116 silver badges172 bronze badges

Collectives™ on Stack Overflow

innerHTML = HTML & JQuery, JQuery doesn't execute

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related