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

Answer 2

最好在获得响应时附加表，而不是附加表，然后设置附加表的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);
  });
});

Answer 3

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

Answer 4

你说另一个文件 - 你是否在该代码中添加了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);
       })
     });
   })

mousedown没有处理动态加载的元素

4 个答案: