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

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

Answer 1

我解决了！ （感谢Cbroe＆amp; 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);

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

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

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

事件处理程序现在绑定到静态项tableId，但它正在侦听与基础类button匹配的事件。这在Event binding on dynamically created elements?

中可以理解

通过上述内容，您可以愉快地添加尽可能多的新<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>

如何通过点击按钮来调用函数？

3 个答案: