为什么我的 jQuery 事件侦听器在应用程序启动时没有运行？

Question

我正在编写一个脚本来检测是否选中了 ID 为“chapterex”的复选框，如果是，则相应地更新页面：如果未选中，则将 multiple 属性添加到文件上传中。否则，不要包含 multiple 属性。脚本运行，但似乎没有执行其预期的操作。

=====js文件=====

function check() {
  let checked = $("#chapterex").is(':checked');
  console.log("checked", checked);
  let inner_html = "<span><strong>Step 2:</strong></span>" +
  "<label for='myfile'>Select a file</label>" +
  "<input type='file' id='letter' name='letter'>" +
  "</div>";
  let inner_html_multiple = "<span><strong>Step 2:</strong></span>" +
  "<label for='myfile'>Select a file</label>" +
  "<input type='file' 'id='letter' name='letter' multiple>" +
  "</div>";
  if (checked) {
    console.log("checked in if");
    $('#file_field').replaceWith(inner_html);
  } else {
    console.log("not checked, in else");
    $('#file_field').replaceWith(inner_html_multiple);
  }
}
check();
console.log("hi successfully attached");
$('#chapterex').on('change', check);

=======html文件=====

<div class="form-group col-sm-12" style="padding-left:0px">
            <span><strong>Step 1:</strong></span>
            <label for="chapter">Text</label>
            <span><input type="checkbox" id="chapterex" name="chapterex"><span>&nbsp;Yes</span></span>
          </div>
          <div class="form-group col-sm-12" style="padding-left:0px" id="file_field">
            <!-- <span><strong>Step 2:</strong></span>
            <label for="myfile">Select a file</label>
            <input type="file" id="letter" name="letter"> -->
          </div>
          <div class="form-group col-sm-12" style="padding-left:0px">
            <span><strong>Step 3:</strong></span>

控制台信息：

-checked false
-not checked, in else
-hi successfully attached

当我在控制台中添加事件侦听器时，它起作用了。根据控制台输出，它正在运行所有内容，但似乎没有附加 HTML。我不确定这是否重要，但我使用的是 Python 的 Flask 库，这是一个托管在不同目录中的脚本。它显然正在运行，所以我怀疑这是任何问题的根源。

我遇到的另一个问题是，即使附加正确，我似乎也无法附加多个文件。我将不胜感激任何帮助！

Answer 1

您的代码中的问题是，当您第一次调用

#file_field

时，您正在删除

check

元素。然后，当

change

事件调用

check

时，找不到该元素，似乎什么也没有发生。

值得注意的是，即使没有找到任何元素，

$('#file_field')

也会返回一个 jQuery 对象，并且调用“空”jQuery 对象的

replaceWith

不会触发任何错误。

将您的代码包装成

$(document).ready(function () {your code here});

以确保代码运行时所有元素都存在，并使用

.html()

而不是

.replaceWith()

。

function check() {
  let checked = $("#chapterex").is(':checked');
  let inner_html = "<span><strong>Step 2:</strong></span>" +
    "<label for='letter'>Select a file </label>" +
    "<input type='file' id='letter' name='letter'>" +
    "</div>";
  let inner_html_multiple = "<span><strong>Step 2:</strong></span>" +
    "<label for='letter'>Select multiple files </label>" +
    "<input type='file' 'id='letter' name='letter' multiple>" +
    "</div>";
  if (checked) {
    $('#file_field').html(inner_html);
  } else {
    $('#file_field').html(inner_html_multiple);
  }
}
check();
$('#chapterex').on('change', check);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-sm-12" style="padding-left:0px">
  <span><strong>Step 1:</strong></span>
  <label for="chapter">Text</label>
  <span><input type="checkbox" id="chapterex" name="chapterex"><span>&nbsp;Yes</span></span>
</div>
<div class="form-group col-sm-12" style="padding-left:0px" id="file_field"></div>
<div class="form-group col-sm-12" style="padding-left:0px">
  <span><strong>Step 3:</strong></span>
</div>