javascript - mousedown 不适用于动态加载的元素

Question

我正在尝试像这样加载我的导航栏:

$.get("nav.html",function(menuData){
  $("body").html(menuData);
)};

在“nav.html”中我们有类似的内容

<td id='menu-item-1'>menu item 1</td>
<td id='menu-item-2'>menu item 2</td>

等等。那么我想为每个项目分配一个事件，我已经尝试过:

$("#menu-item-1").mousedown(function(response){
  //create an empty table
  $("body").append("table id='menu-item-1-sub-table'></table>");
  //retrieve php data and insert it in the table
  $.get("data.php",function(response){
    $("#menu-item-1-sub-table").html(response);
  });
});

问题是该事件不会触发。当我直接在 JavaScript 中使用 html 时，它就起作用了，例如:

$("body").append("<table><tr><td id='menu-item-1'>menu-item-1</td></tr></table>");

但是将其移动到另一个文件后，它不再起作用。

编辑

这是一个有效的答案:

使用

$("body").on('click','#menu-item-1',function(){
etc.
});

因为当我们尝试时，menu-item-1 尚未创建

$("#menu-item-1).mousedown

Answer 1

给你一个替换的答案

$("#menu-item-1").on("click",function(){
  //stuff
});

与

$('body').on('click','#menu-item-1', function(){
  //stuff
}); 

之所以有效，是因为当 .on() 被委托(delegate)时，#menu-item-1 尚未出现在页面上，但是当调用它时，它可以选择 #menu-item-1