Question

我有一个Django应用程序，我在<body>标记的底部声明了一个变量，并且试图在我的javascript代码的第3部分事件侦听器函数内使用此变量，但是说该变量未定义。

我尝试使用.bind()将变量传递给事件侦听器，但这似乎也不起作用。我也尝试过从window.allJobsiteNames获取变量，但这也是未定义的。

<!-- index.html -->
<body>
  <script type="text/javascript" src="{% static 'js/autoComplete.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/siren_search.js' %}"></script>
  <script type="text/javascript">
      var allJobsiteNames = "{{ all_jobsite_names|safe }}".replace(/'/g, '"');
  </script>
</body>

// siren_search.js

$(document).ready(function () {

  console.log(allJobsiteNames) // ==> prints correctly

  // Add an event listener to the searchbar
  document.querySelector("#searchbar").addEventListener("autoComplete", function (event) {
    console.log(event.detail);
  }.bind(allJobsiteNames));

  // User presses enter on the search bar
  $('#searchbar').on('keypress', function (event) {
    addSearchSpinner(event);
  });

});

// source code: https://github.com/TarekRaafat/autoComplete.js
new autoComplete({
  data: {                              
    src: allJobsiteNames, // allJobsiteNames is not defined
  },

  // some code
});

我得到的确切错误是：

未捕获的ReferenceError：未定义allJobsiteNames 在siren_search.js：261（匿名）@ siren_search.js：261

Answer 1

检查执行JavaScript的顺序。

在执行siren_search.js时，尚未定义allJobsiteNames。

更改脚本的顺序

<!-- index.html -->
<body>
  <script type="text/javascript">
      var allJobsiteNames = "{{ all_jobsite_names|safe }}".replace(/'/g, '"');
  </script>
  <script type="text/javascript" src="{% static 'js/autoComplete.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/siren_search.js' %}"></script>
</body>

$(document).ready(function () { ... });部分等待页面完成加载，因此在定义allJobsiteNames之后异步执行。

如何将用HTML声明的变量传递给第三方事件监听器？

1 个答案: