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

Answer 2

有一種不錯的方法，可以讓此代碼在機翼中等待，以便它可以正常工作。 插入HTML時，請跳過JavaScript-單獨處理。

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

如果/當插入時，jQuery將適用於HTML，並且您的HTML不需要其中包含任何JavaScript。

Answer 3

您尚未關閉<script>標記：

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