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

2024-05-18 05:14:24 发布

您现在位置：Python中文网/ 问答频道 /正文
7709 3

我有一个Django应用程序，我在<body>标记的底部声明了一个变量，我试图在javascript代码的第三部分事件侦听器函数中使用这个变量，但它一直说这个变量未定义

我曾尝试使用.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
});

我得到的确切错误是：

Uncaught ReferenceError: allJobsiteNames is not defined at siren_search.js:261 (anonymous) @ siren_search.js:261


Tags： textsrceventsearchtypejs事件script
1条回答
网友
1楼 · 发布于 2024-05-18 05:14:24

检查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之后异步执行

相关问题 更多 >

    编程相关推荐