javascript - 如何通过单击按钮调用函数？

Question

我最近开始使用 javascript 来寻找乐趣。我自己完成了大部分 w3schools 教程(包括 jquery ofc)。

我卡住的地方是只需单击一个按钮即可调用一个函数。

我的代码(经过编辑以提供最小的、完整的和可验证的示例)

$("#linkId1").on("click", function(){

  setTimeout(function(){

  function decryptText() {
  alert( "decrypted!" );
  }

  $("tableId").append('<a id="decryptID" class="button">decrypt</a>');
  $("#decryptID").on("click", decryptText);

  }, 500);
});

HTML:

<a id="linkId1">firstLink</a>

<table>
 <tbody>
  <tr>
   <td id="tableId">
    <a id="button1" class="button"></a>
    <a id="button2" class="button"></a>
   </td>
  </tr>
 </tbody>
</table>

这是我已经尝试过的:

• 调用函数的不同方法

• 使函数 decryptText() 成为全局或局部

• - 在创建按钮后将 eventListener 添加到按钮(因为我在另一篇文章中读到最好使用 eventListener而不是将 onclick 属性放在 HTML 标记中)。 ~我混合了此处使用 jQuery 方法的基本 js - 大错误。

浏览器控制台没有给我任何错误 - 当我稍微更改代码时，我得到:Reference Error: decryptText() not defined

S.

编辑:我尝试只在 jQuery 中完成这一切，包括选择器和事件处理。

如您所见，我将示例代码更改为简单加密和解密脚本的开头 - 但核心问题仍然保持不变。

使用 Firefox 的检查器工具检查，这次该元素没有绑定(bind)任何事件。

一条可能很重要的信息是，在 onclick ajax 处理程序 从元素 #linkId1 调用并插入之前，您可以在 HTML 中看到的表格不存在将包含表格的整个 div 放入 html。

Answer 1

我解决了!(感谢 Cbroe 和 Se0ng11)

之前的代码:

$("#tableId").append('<a id="decryptID" class="button">decrypt</a>');
$("#decryptID").on("click", decryptText);

之后的代码:

$("#tableId").append('<a class="button">decrypt</a>');
$(".button:contains('decrypt')").on("click", decryptText);

问题是由我分配给第 1 行中附加()的超链接元素的静态 ID 造成的。删除 ID 并更改第 2 行中的 jQuery 选择器成功了!