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