Question

.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>

loadPartials

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");
  }
}

先谢谢你！

Answer 1

getElementById 中的 D 不大写

Answer 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 是另一个要声明的函数时，它会在使用 eventListenter 加载之后处理 search.html。并且 params 通常从处理您界面中的元素的 clickEventHandler(e) 函数调用。

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

的函数

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

//and

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

在我看来，您的问题只是调用了 getElementById。剩下的只是建议。

Answer 3

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

您可以通过在 alert() 中添加 loadSearchView() 来测试您的 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 Script 无法识别 [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");
  }
}

输出：

事件监听器 STILL 不监听？

3 个答案:

示例：

示例：

参考：

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

3 个答案:

示例：

示例：

参考：

事件监听器 STILL 不监听？