Question

我正在研究ZURB Foundation 6.4框架（ZURB模板）中的JS集成。我已经了解了有关使用CommonJS和ES6导入和导出JS模块的一些基本知识，但是我决定坚持使用ES6。

现在，我有以下包含jquery Eventlisteners的JS代码：

import * as indexJS from './lib/indexLogic.js'

$("#nullifier").on("click",function(){
              console.log("nullifier with Jquery worked")
              document.getElementById("loremIpsum").innerHTML = "loremNullified"
            })

$("#customAJAX").on("click",function(){
                //helloAsync()
                indexJS.helloAsync()
              })

现在，此代码位于JS文件中，然后通过脚本标签集成到我的标记中，如下所示：

{{!-- This is the base layout for your project, and will be used on every page unless specified. --}}

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{page}}</title>
    <link rel="stylesheet" href="{{root}}assets/css/app.css">
  </head>
<body>

<!--unimportant markup -->

<script src="{{root}}assets/js/appIndex.js"></script>


</body>
</html>

现在，以上是着陆页，其中包含了jQuery eventlistener所引用的元素的其他标记被注入到该页面。所说的标记在这里：

<div class ="grid-container">
  <div class ="grid-y grid-padding-y">

    <div class =  "cell">
      {{> animated-search-form}}
    </div>

    <div class =  "cell">
      {{> testChart}}
    </div>
    <div class =  "cell">
      {{> app-dashboard-layout}}
    </div>

    <div class = "cell">
      {{> form-floating-label}}
    </div>



  </div>
</div>

<button id="nullifier" class="button">ClickMeJQuery!</button>
<button id="customAJAX" class="button">ClickMeAJAX!</button>
<button id="customImportStuff" class="button">ClickMeCustomImportStuff!</button>

包含jQuery事件侦听器的JS从以下模块中导入被调用的JS函数，如下所示：

export async function helloAsync(){
  console.log("hello Async")
  let response =  await getThatJSON()
  console.log("response was propagated upwards and is ", response)
}


function getThatJSON(){
  console.log("onclick happened")
  return $.get('https://jsonplaceholder.typicode.com/todos/1', {

      }).then((response) => {
        response = JSON.stringify(response)
        console.log(response)
        console.log("AJAX happened")
        return response
  })
}

export function attachOnclick(){
    $("customImportStuff").on("click", function(){
      console.log("export/import worked!")
    })
}

如您所见，出于测试目的，我还导出了一个包含jQuery Eventlistener的函数。但它不起作用。当我单击上面显示的按钮时，戴着相应的ID，什么也没发生。没有错误，没有警告，但也没有期望的反应。

我已经在关于SO的另一个问题中读到，我使用的方法应该有效，但是至少对我而言，它不起作用： import and export a jquery function

有什么原因吗？我是在做错什么，还是无法导出/导入附加eventListener的函数？

可以导入jQuery事件监听器？

0 个答案: