JavaScript 在 HTML Ajax 加载的内容中不起作用

Question

尝试在网页上的 Ajax 加载内容中运行 JavaScript 时遇到问题。我一直收到错误消息“无法设置 null 的属性”。例如，如果我将脚本的输出移动到 Ajax 加载内容之外的页脚，则脚本可以正常工作。

这是在主网页上加载 ajax 的代码片段：

<main>
    <article class="ext-content">

    </article>
    </main>

这是加载 ajax 内容的 JavaScript 代码：

$('section li').click(function() {
    $.ajax({
      type: 'GET',
      url: 'includes/ext-content/'+$(this).data('content')+'.html',
      dataType: 'html',
      success: function(response) {
        $('.ext-content').html(response);
      }
    });
  });

这是 ajax 加载内容的一部分，当用户选择商品数量时，会显示商品价格 * 所选数量。 shopOutput 是价格将在网页上显示的位置：（如果我将 shopOutput 移到 Ajax 内容之外，脚本可以正常工作。）

          <tr>
            <td colspan="3" class="shop-qty-select">
                <select onchange="addElements(this)">
                  <option value="0">Select aantal:</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                </select>
                <p id="shopOutput"></p>
            </td>
        </tr>

这是获取所选金额并向用户显示总价是多少的 JavaScript：

let shopOutput = document.getElementById("shopOutput");

const priceFractal = 10;

function addElements(selectElement) {

  let valueNumbers = selectElement.value;

  shopOutput.innerHTML = ""; 

    let yourTotal = valueNumbers * priceFractal;
    shopOutput.textContent = yourTotal;
}

任何帮助深表感谢。

就像我提到的那样，我知道如果我只是将输出移到 Ajax 加载的内容之外，这段代码就可以工作。但是当它在 Ajax 内容中时，出现错误“无法设置 null 的属性（设置‘innerHTML’）”

Answer 1

这是运行立即地当页面加载时：

let shopOutput = document.getElementById("shopOutput");

由于 #shopOutput 元素尚不存在，shopOutput 变量当然会是 null。而且它将始终继续为null，因为它从未重新分配过。

如果在调用函数之前不需要使用它，请在函数中设置它：

function addElements(selectElement) {
  let shopOutput = document.getElementById("shopOutput");
  // the rest of the function...
}