Question

我有一个横向类别栏。这是由php填充 - 我在锚点上设置了一个data-cat-id属性。然后使用jquery click函数得到这样的值：

        $('.filterCat').click(function() {
            alert('cat id is:'+$(this).data("cat-id"))
            return false;
        });

这很好用。但是水平条有一个功能，可以将列表元素添加到＆＃34;更多＆＃34;当宽度小于其内容时的子菜单。使用代码：

$（function（）{
alignMenu（）;

$(window).resize(function() {
  $("#horizontal").append($("#horizontal li.hideshow ul").html());
  $("#horizontal li.hideshow").remove();
  alignMenu();
});

function alignMenu() {
  var w = 0;
  var mw = $("#horizontal").width() - 150;
  var i = -1;
  var menuhtml = '';
  jQuery.each($("#horizontal").children(), function() {
    i++;
    w += $(this).outerWidth(true);
    if (mw < w) {
      menuhtml += $('<div>').append($(this).clone()).html();
      $(this).remove();
    }
  });
  $("#horizontal").append(
    '<li  style="position:relative;" href="#" class="hideshow">' + '<a href="#">More ' + '<span style="font-size:13px">&#8595;</span>' + '</a><ul>' + menuhtml + '</ul></li>');
  $("#horizontal li.hideshow ul").css("top",
    $("#horizontal li.hideshow").outerHeight(true) + "px");
  $("#horizontal li.hideshow").click(function() {
    $(this).children("ul").toggle();
  });
  if (menuhtml == '') {
    $("#horizontal li.hideshow").hide();
  } else {
    $("#horizontal li.hideshow").show();
  }
}

}）;

这也有效但现在有了更多的＆＃34;按钮（因为内容较大）点击功能不再起作用。

我做了一个小提琴 - 如果你点击一个普通的菜单项它会显示警告，但如果你点击一个位于＆＃34;更多＆＃34;它没有看到FIDDLE：https://jsfiddle.net/quosa60e/

Answer 1

对于动态创建的元素.click()不起作用

document.on('click','SELECTOR',function(){});

所以你应该使用：

$(document).on('click','.filterCat',function() {
    alert('cat id is:'+$(this).data("cat-id"))
    return false;
});

jquery - 动态菜单 - 单击功能不起作用

1 个答案: