如何使用 document.getElementByID 在动态生成的 HTML 中调用 JavaScript function

Question

我正在使用 JavaScript 的 getElementById 生成动态 HTML ，并且在 HTML 中我有一些函数调用了 onclick 事件，但它们不起作用。 下面是我的代码片段。

动态 HTML

function appendAbc() {
        document.getElementById('showAbc').innerHTML = `
            <div class="form-group row">
                <div class="col-12">
                    <label for="mpa-bg-text">Backgrounds</label><a class="pl-2 text-primary" id="random"
                        onclick="set_bg_dropdown()" style="cursor:pointer"><i
                            class="fa fa-refresh"></i></a><label class="text-danger pl-2"
                        style="font-size:11px">( Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.)</label>
                </div>
                <div class="col-5" id="mpa-no-of-bg-div">
                    <select class="form-control" id="mpa-no-of-bg" name="total-bgs"
                        onchange="set_bg_div()">

                    </select>
                </div>
                <div class="col-12 mt-4" id="mpa-bg-div">

                </div>
            </div>
    <div class="form-group row" id="mpa-preview-div" style="display: block">
            <div class="col-sm-12 text-center">
                <a class="btn btn-sm btn-primary rounded shadow" onclick="preview()" id="mpa-preview-button"
                    name="preview">Preview</a>
                <button type="submit" class="btn btn-sm btn-primary rounded shadow" id="mpa-upload-button">
                    Upload
                </button>
            </div>
        </div>`};

我是 Js 的新手，请帮助我在使用 Js 生成 HTML 后如何调用这些函数。

Answer 1

我将片段剪切并粘贴到 HTML 包装器中，这是工作代码。 顺便说一句，我个人会避免仅出于多行分配的目的使用反引号，因为反引号通常用于 ${} 评估。 所以我会说谨慎使用它。

您可以进一步向 go 提供更多详细信息。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<title>BootStrap Test</title>
</head>
<body>
<h3>BS Events</h3>

<button type="button" class="btn btn-primary" onClick="appendXyz()"> ShowABC </button>

<div id='showAbc'>Place Holder</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

<script>

function set_bg_dropdown() {
  alert("set_bg_dropdown");
}

function set_bg_div() {
  alert("set_bg_div");
}

function preview() {
  alert("preview");
}

function appendXyz() {
  document.getElementById('showAbc').innerHTML =`
    <div class="form-group row">
      <div class="col-12">
          <label for="mpa-bg-text">Backgrounds</label><a class="pl-2 text-primary" id="random"
             onclick="set_bg_dropdown()" style="cursor:pointer"><i class="fa fa-refresh"></i></a><label class="text-danger pl-2"
               style="font-size:11px">( Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.)</label>
      </div>
      <div class="col-5" id="mpa-no-of-bg-div">
                    <select class="form-control" id="mpa-no-of-bg" name="total-bgs" onchange="set_bg_div()">
                    <option selected>Click here to select the menu</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                    </select>
      </div>
      <div class="col-12 mt-4" id="mpa-bg-div">

      </div>
    </div>
    <div class="form-group row" id="mpa-preview-div" style="display: block">
      <div class="col-sm-12 text-center">
                <a class="btn btn-sm btn-primary rounded shadow" onclick="preview()" id="mpa-preview-button"
                    name="preview">Preview</a>
                <button type="submit" class="btn btn-sm btn-primary rounded shadow" id="mpa-upload-button">
                    Upload
                </button>
      </div>
    </div>
`;
}

</script>

</body>
</html>

如何使用 document.getElementByID 在动态生成的 HTML 中调用 JavaScript function

问题描述

1 个解决方案

解决方案1
0 2022-08-19 20:21:09

如何使用 document.getElementByID 在动态生成的 HTML 中调用 JavaScript function

问题描述

1 个解决方案

解决方案1 0 2022-08-19 20:21:09

解决方案1
0 2022-08-19 20:21:09