如何通过单击按钮调用功能？

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的检查器工具进行检查，这次元素没有绑定任何事件。

一个可能重要的信息是，在从元素#linkId1调用onclick ajax handler并将包含表的整个div插入到html之前，您在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行中的append（）的超链接元素的静态ID创建的。删除ID并更改第2行中的jQuery选择器！

Answer 2

我将为您的问题提供替代解决方案。 如果在将元素附加到表之前将其创建为完全成熟的jQuery，则可以将click事件直接绑定到此，而无需再次找到它：

var newA = $('<a\>').addClass('button').text('decrypt');
newA.on("click", decryptText);
$("#tableId").append(newA);

在将DOM元素追加到DOM 之前， $('<a\\>')将创建DOM元素作为变量。 此处对您当前代码的主要优点是，即使您有多个具有相同文本（ decrypt ）的元素，也可以保证该单击绑定到该<a>标记。 我主要是说这是因为你使用的选择器".button:contains('decrypt')"非常模糊，如果你运行相同的代码两次，它可以匹配你不期望的事件或事件绑定处理程序两次。

另一种选择是使用委托来鼓泡事件：

$("#tableId").on('click', '.button', decryptText);

事件处理程序现在绑定到静态项tableId但它正在侦听与基础类button匹配的事件。 在这里可以理解这是动态创建元素的事件绑定吗？

有了上述内容，您可以愉快地添加尽可能多的新<a>因为您已经知道已经处理了事件绑定，即您不必在创建时绑定事件。

Answer 3

试试这个，你遗漏了一些东西， $(document).ready(function () {}和$("tableId").append(...);应该使用# $("#tableId").append(...);因为tableId是元素的id而不是元素本身。它也适用于W3c，它不像你不应该使用这个或因为你是初学者。你可以使用任何地方。

 $(document).ready(function () { $("#linkId1").on("click", function () { setTimeout(function () { function decryptText() {alert("decrypted!"); } $("#tableId").append('<a id="decryptID" class="button">decrypt</a>'); $("#decryptID").on("click", decryptText);}, 500);}); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table><tr><td> <a id="linkId1">firstLink</a></td> </tr> <tr><td id="tableId"> <a id="button1" class="button"></a> <a id="button2" class="button"></a> </td> </tr> </table>