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);
  });
});

问题是事件不会触发。当我将 html 直接放在 javascript 中时，它就起作用了，例如：

$("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() 被委派时，#menu-item-1 尚未出现在页面上，但是当它被调用时，它可以选择 #menu-item-1

Answer 2

我认为问题在于您必须在 body.html(menuData) 之后的 get 回调中设置处理程序。但如果一切正常，我认为在页面上加载菜单模板是一种奇怪的方式。

Answer 3

您说的是另一个文件 - 您是否在该代码中添加了 jquery？或者当您加载 mousedown 代码时元素可能不存在 - 尝试 jquery on-function。

 $('#menuitem').on(function(){

    $("#menu-item-1").mousedown(function(response){
      $("body").append("table id='menu-item-1-sub-table'></table>");
       $.get("data.php",function(response){
       $("#menu-item-1-sub-table").html(response);
       })
     });
   })

Answer 4

您最好在收到响应时附加表格，而不是附加表格然后设置附加表格的 html

$('body').on('click','#menu-item-1', function() {
  $.get("data.php",function(response){
    $("body").append('<table id="menu-item-1-sub-table">'+response+'</table>');
  });
});

基于你已经完成的事情

$('body').on('click','#menu-item-1', function() {
  $("body").append("<table id='menu-item-1-sub-table'></table>");
  $.get("data.php",function(response){
    $("#menu-item-1-sub-table").html(response);
  });
});