事件监听器 **STILL** 不监听？答案

【问题标题】：Event Listener **STILL** not listening?事件监听器 **STILL** 不监听？
【发布时间】：2021-07-02 13:40:35
【问题描述】：

.addEventListener 似乎没有收到我的点击次数，经过数小时的研究，我似乎无法弄清楚我哪里出错了。我已经进行了建议的更改，但仍然没有收到点击响应？这是我也看到的错误列表

document.getElementById("search-link").addEventListener("click",loadSearchView);

main.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <style>
    .nav-link{
      cursor:pointer;
    }
  </style>
  
  </head>
  <body>
  
  
<div class="container">
 <ul class="nav nav-tabs">
  <li class="nav-item">
    <div class="nav-link active" id="home-link">Home</div>
  </li>
  <li class="nav-item">
    <div class="nav-link" id="search-link">Search</div>
  </li>
  <li class="nav-item">
    <div class="nav-link" id="add-member-link">Add Member</div>
  </li>
</ul>

 
  <div id="app">
  </div>
  <!--GET CONTENT HERE-->
</div>

<!--Optional JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
  <script>

  function loadSearchView(){
        loadView("search");
    }    
  function loadView(options){
   
    google.script.run.withSuccessHandler(function(html){
    document.getElementById("app").innerHTML = html;
    }).loadView(options);
  }
  
  document.getElementById("search-link").addEventListener("click",loadSearchView);


  </script>


  </body>
</html>

search.html

<h1>This is a test</h1>

加载部分

function loadPartialHTML_(partial){
  const htmlServ = HtmlService.createTemplateFromFile(partial);
  return htmlServ.evaluate().getContent();
}

function loadSearchView(){

  return loadPartialHTML_("search");

}

function loadAddMembersView(){

  return loadPartialHTML_("addmember");

}

function loadView(view){

if(view == "search"){
  return loadPartialHTML_("search")
}else if (view == "addmembers"){
  return loadPartialHTML_("addmembers");
  }
}

提前谢谢你！

【问题讨论】：

标签： javascript html css google-apps-script google-sheets

【解决方案1】：

getElementById 中的 D 没有大写

【讨论】：

这就是应用程序脚本自动完成它的方式。两种方法我都试过了，没有任何变化

【解决方案2】：

做这样的事情：

更改您的loadview 函数以处理接受您要加载的函数、回调函数和参数的对象。如果您打算扩展您的系统，您将来会需要它。

function loadView(options) {
    var id = typeof options.id === "undefined" ? "app" : options.id;
    var cb = typeof options.callback === "undefined" ? function () { } : options.callback;

    google.script.run.withSuccessHandler(function (html) {
       document.getElementById(id).innerHTML = html;
       typeof options.params === "undefined" ? cb() : cb(options.params);
    })[options.func]();
}

之后，请确保您正确调用getElementById()，最后没有大写的ID。调用应该是这样的：

document.getElementById("search-link").addEventListener("click",loadSearchView);

loadSearchView 函数在你的情况下应该是这样的

function loadSearchView() {
   loadView({ func: "loadSearchView" });
}

但请记住，如果您想在loadSearchView 之后做某事，您可以在回调函数中调用它，也可以发送参数。像这样的东西：

function loadSearchView() {
   loadView({ func: "loadSearchView", callback: afterSearchViewLoads params: { id: e.target.dataset.id }});
}

当afterSearchViewLoads 是另一个要声明的函数并在search.html 加载eventListenter 后处理它。 params 通常是从处理界面元素的 clickEventHandler(e) 函数中调用的。

一个例子是创建另一个名为

的函数

document.getElementById("app").addEventListener("click", clickEventHandler);

//and

function clickEventHandler(e){
 if(e.target.matches(".some-button-class)){
    doSomething(e);
}

在我看来，您的问题只是对getElementById 的调用。其余的只是建议。

【讨论】：

【解决方案3】：

应该是getElementById 而不是getElementByID。 getElementById 在您尝试时不起作用的原因之一是 Apps 脚本无法识别您要在 eventListener ([options.func]()) 中运行的函数。

您可以通过在 loadSearchView() 中添加 alert() 来测试您的 eventListener 是否正常工作。

示例：

代码：

function loadSearchView(){
   alert("Im in loadSearchView")
}

输出：

addEventListener() 的替代方法是将onClick() 直接用于nav-item。

发件人：

<li class="nav-item">
    <div class="nav-link" id="search-link">Search</div>
</li>

收件人：

<li class="nav-item">
   <div class="nav-link" id="search-link" data-toggle="tab" onclick="loadSearchView()">Search</div>
</li>

由于 Apps 脚本无法识别 [options.func]() 而您希望它变为动态的，因此您可以将 options 传递到服务器端并使用它来识别要显示的 html。

示例：

代码：

main.html

<script>
   function loadSearchView(){
      loadView("search");
   }
   
   function loadView(options){
     google.script.run.withSuccessHandler(function(html){
     document.getElementById("app").innerHTML = html;
    }).loadView(options);
   }

   document.getElementById("search-link").addEventListener("click",loadSearchView);
</script>

代码.gs

function loadView(view){
  if(view == "search"){
    return loadPartialHTML_("search")
  }else if(view == "addmembers"){
    return loadPartialHTML_("addmembers");
  }
}

输出：

参考资料：

【讨论】：

@JustinWiles - 如果您觉得我的回答对您有用，请考虑 accepting and upvoting 我的回答