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

Question

我有一个水平的类别栏。这是由PHP填充 - 我设置锚点上的数据猫ID属性。然后使用jquery点击函数来获得像这样的值：

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

这工作正常。但是水平条有一个函数，当宽度小于其内容时，将列表元素添加到“更多”子菜单。使用的代码：

$（函数（）{
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(); 
    } 
} 

}）;

这也适用，但现在当有一个“更多”按钮（因为内容更大），点击功能不再起作用。

我已经做了小提琴 - 如果你点击它显示警报正常的菜单项，但如果你在一个项目单击是在“多”它什么都不做地看到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; 
});