Question

我有几个可以显示的按钮，它们触发了JavaScript EventListeners。到目前为止，它们都工作正常，但是我添加的最新版本不起作用。 Tham表示根本没有调用Listener。我没办法了，希望您能找到我所缺少的...

“集体”按钮不起作用...

Javascript：

var rid = document.getElementById("rid").value;
var clearButton = document.querySelector("[data-action=clear]");
var saveButton = document.querySelector("[data-action=save]");
var collectiveButton = document.querySelector("[data-action=collective]");
var discardButton = document.querySelector("[data-action=discard]");

clearButton.addEventListener("click", function (event) {
  signaturePad.clear();
});


saveButton.addEventListener("click", function (event) {
  if (signaturePad.isEmpty()) {
    alert("Bitte geben Sie erst eine Unterschrift ein.");
  } else {
    var dataURL = signaturePad.toDataURL();
    //alert("RID: " + rid + "DataURL:" + dataURL);
    $.ajax({
      type: "POST",
      url: "../system.php",
      data: {
         imgBase64: dataURL,
         rid: rid,
         SaveSignature: true
      }
    })
    .always(function() {
    window.location.href = '../system.php?site=createreports&success=true';
  });
  }
});

discardButton.addEventListener("click", function (event) {
    $.ajax({
      type: "POST",
      url: "../system.php",
      data: {
         rid: rid,
         DeleteReport: true
      }
    })
    .always(function() {
    window.location.href = '../system.php?site=createreports&success=discard';
  });
});


collectiveButton.addEventListener("click", function (event) {
  if (signaturePad.isEmpty()) {
    alert("Bitte geben Sie erst eine Unterschrift ein.");
  } else {
    var dataURL = signaturePad.toDataURL();
    //alert("RID: " + rid + "DataURL:" + dataURL);
    $.ajax({
      type: "POST",
      url: "../system.php",
      data: {
         imgBase64: dataURL,
         rid: rid,
         SaveCollectiveSignature: true
      }
    })
    .always(function() {
    window.location.href = '../system.php?site=createreports&success=true';
  });
  }
});

HTML部分：

<div class="row vdivide">
    <div class="col-sm-12 text-center">
        <input type="hidden" name="rid" id="rid" value="31">
        <div id="signature-pad" class="signature-pad">
            <div class="signature-pad--body">
                <canvas></canvas>
            </div>
        </div>
    </div>
</div>
<div class="row vdivide">
    <div class="col-sm-12 text-center"></div>
</div>
<div class="row vdivide">
    <div class="col-sm-12 text-center">
        <div class="btn-group">
            <button type="button" class="btn btn-primary" aria-haspopup="true" aria-expanded="false" data-action="clear">Neu anfangen</button>
            <button type="button" class="btn btn-primary" aria-haspopup="true" aria-expanded="false" data-action="save">Speichern einzeln</button>
            <button type="button" class="btn btn-primary" aria-haspopup="true" aria-expanded="false" data-action="collective">Speichern alles</button>
        </div>
    </div>
</div>

非常感谢您的帮助。

Answer 1

如果您查看开发者控制台，应该会看到错误消息：

未捕获的TypeError：无法读取null的属性'addEventListener'

这是因为HTML中没有带有data-action=discard的按钮，因此语句document.querySelector("[data-action=discard]")返回null。

当您的代码尝试将事件监听器分配给discardButton（即null）时，它将引发错误，并且代码停止，这意味着将事件监听器添加到{{1 }}未执行。

如果HTML是有条件的，则在尝试向其添加事件侦听器之前，需要检查按钮是否存在。像这样简单的事情：

collectiveButton

Answer 2

正如@Herohtar所说，您应该在if语句中包装addEventListener函数，以检查其是否不为null。如果我要有条件地显示按钮，我将在这里使用类似这样的辅助函数：

function addClickEvent(button , func){
  if(button){
    button.addEventListener('click',func);
  }else{
    console.error('Button doesn\'t exist ');
  }
};

带有EventListener的多个按钮，其中一个不起作用

2 个答案: