Question

假设我有主页：

<html>
  // Blah blah blah
  <button />
  // Blah blah blah
<script type="text/javascript">
  // Nothing here
</script>
</html>

主页面上的那个按钮打开一个具有以下结构的模态：

<div>
  <!-- HTML Stuff -->
</div>
<script type='text/javascript'>
  $(function() {
    // hide stuff, show stuff
  });
  function whatever() {
    // do some stuff
  }
</script>

这个模态加载到我的DOM中问题是：
为什么 whatever函数无法在模态的上下文中调用？
例如，如果我在模态中有一个select标记，并为其添加eventListener，那么在触发时，它会调用whatever函数，如下所示：

$('#select').on('change', function() {
  whatever();
});

甚至：

<select onchange="whatever()" />

如果我将功能移动到主页面，在模态之外它就像魅力一样它是否与正在执行的代码有关，并且当它被加载时会丢失所有引用？

Answer 1

您是否尝试过这样的事情（半伪代码; - ）

<强>模态：

function initModal() {
    $('#select').on('change', function() {
        whatever();
    });
}

主页：

$.get('modal.html').success(function() {
    initModal();
});

Answer 2

问题是，在将html插入DOM之前执行动态加载的脚本。

查看我对How to append javascript block in a string into html?

的回答

自动执行动态加载的javascript代码

2 个答案: