jquery - 单击事件仅适用于一个元素？

Question

我在 api.jquery.com 和我的脚本上浪费了 1 个小时来确定问题，但仍然无法。

这是我的script.js

// DOM ready

$(function(){

    // gets categories from server
    $.post("category.php", function(data) {
        $("#category ul").html(data);
    });

    // tests click event
    $("a").click(function(evt) {
        alert("Handler for .click() called.");
        evt.preventDefault();
    });

});

在 index.php 中有 4 个锚标记，前三个是从服务器加载的，如您在脚本中看到的，最后一个是预加载的（静态）（不是从服务器加载的）。问题是我在 jQuery 选择器中选择了所有锚元素，正如您在脚本中看到的那样，但我的事件仅适用于预加载的最后一个锚标记。怎么了 ？为什么该事件不适用于前三个锚标签？

Answer 1

尝试使用on

   $('body').on('click', 'a', function(evt) {
     alert("Handler for .click() called.");
     evt.preventDefault();
   });

Answer 2

尝试：

$(document).on('click', 'a', function (){
    //do something
});

这会将您的处理程序绑定到当前存在的所有锚标记以及将来动态添加的任何标记。

Answer 3

$(function(){

// gets categories from server
$.post("category.php", function(data) {
   $("#category ul").html(data);

// tests click event
   $("a").click(function(evt) {
      alert("Handler for .click() called.");
      evt.preventDefault();
  });
 });
});

您必须等到 ajax 发布请求准备好！

问候！