0

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

$.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
4

4 回答 4

4

给你一个答案替换

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

和

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

有效，因为当.on()被委派的时候#menu-item-1还没有出现在页面上，但是当它被调用时它可以选择#menu-item-1

于 2013-01-19T20:53:45.477 回答
0

您最好在收到响应时附加表格，而不是附加表格然后设置附加表格的 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);
  });
});
于 2013-01-19T20:20:28.163 回答
0

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

于 2013-01-19T20:22:39.810 回答
0

您说的是另一个文件-您是否将 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);
       })
     });
   })
于 2013-01-19T20:28:44.650 回答