javascript - innerHTML = HTML & JQuery, JQuery 不执行

Question

我正在使用 jscript 插入 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;}

变量的 HTML 部分传递得很好，但 JQuery 动画不起作用。如果我像下面这样在 HTML 中硬编码，动画就可以正常工作。

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

感谢您的帮助。

Answer 1

.innerHTML 不执行脚本元素。您可以在 jQuery 中使用 .html() ...

或者做一些明智的事情，直接运行代码:

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