twitter-bootstrap 从 jQuery AJAX 动态创建引导下拉菜单不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22317904/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
dynamically creating bootstrap dropdown from jQuery AJAX doesnt work
提问by Ayush
I'm new to jQuery, its bin 3 days and before asking i've looked upon all ques here. I want to populate the navbar with dropdowns using data from a json file, i'm able to perfectly parse the data but the usage to bootstrap for dropdown, I'm adding classes from jQuery dynamically but they simply wont work, please help.
我是 jQuery 的新手，它的 bin 是 3 天，在问我之前，我已经查看了这里的所有问题。我想使用来自 json 文件的数据填充带有下拉列表的导航栏，我能够完美地解析数据但是引导下拉列表的用法，我正在从 jQuery 动态添加类，但它们根本不起作用，请帮助。
Heres my index.html
这是我的 index.html
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<title>JavaScipt AJAX</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div class="navbar secondary-navbar" id="department-nav">
<div class="navbar-inner" id="menu">
</div>
</div>
<script src="jquery.min.js"></script>
<script src="script_menu.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
sript_menu.js
sript_menu.js
$( document ).ready(function() {
$.getJSON( "data.json", function(data) {
console.log( data );
var menu_item = '<ul class="nav nav-departments nav-featured">';
var output = '<ul class="nav-list">';
$.each(data, function(key, val) {
if(val.warehouse_id=="1"){
if(val.name=="Produce" || val.name=="Bakery" || val.name=="Dairy & Eggs" || val.name=="Beverages" ) {
menu_item += '<li class="dropdown">';
menu_item += '<a class="navbar-link dropdown-toggle">' + val.name + '</a>';
output+= '<li>';
output+= '<h2>' + val.name + '</h2>';
menu_item += '<ul class="dropdown-menu">';
for(var i=0; i<val.aisles.length; i++) {
output+= '<p>' + val.aisles[i].name + '</p>';
menu_item += '<li>' + val.aisles[i].name + '</li>';
}
menu_item += '</ul>';
menu_item += '</li>';
output+= '</li>';
}
}
});
output+= '</ul>';
menu_item+= '</ul>';
$('#menu').html(menu_item);
$('#update').html(output);
});
});
Heres my data.json
这是我的 data.json
[
{
"display_name": "Beer, Wine & Spirits",
"id": 148,
"name": "Beer, Wine & Spirits",
"rank_offset": 991,
"sort_order": 9,
"visible": true,
"warehouse_id": 2,
"aisles": [{
"department_id": 148,
"id": 979,
"name": "Spirits",
"rank_offset": 1,
"visible": true
}, {
"department_id": 148,
"id": 976,
"name": "Beer",
"rank_offset": 2,
"visible": true
}]
}, {
"display_name": "Prepared Food",
"id": 59,
"name": "Prepared Food",
"rank_offset": 990,
"sort_order": 3,
"visible": true,
"warehouse_id": 2,
"aisles": [{
"department_id": 59,
"id": 776,
"name": "Tofu & Soy",
"rank_offset": 45,
"visible": true
}, {
"department_id": 59,
"id": 465,
"name": "Salads, Sushi & Wraps",
"rank_offset": 10,
"visible": true
}, {
"department_id": 59,
"id": 466,
"name": "Sides & Soups",
"rank_offset": 40,
"visible": true
}, {
"department_id": 59,
"id": 468,
"name": "Whole Meals",
"rank_offset": 20,
"visible": true
}, {
"department_id": 59,
"id": 764,
"name": "Fresh Pasta",
"rank_offset": 35,
"visible": true
}, {
"department_id": 59,
"id": 770,
"name": "Desserts",
"rank_offset": 50,
"visible": true
}, {
"department_id": 59,
"id": 771,
"name": "Fresh Pizza",
"rank_offset": 30,
"visible": true
}]
}, {
"display_name": "Grocery",
"id": 57,
"name": "Grocery",
"rank_offset": 997,
"sort_order": 5,
"visible": true,
"warehouse_id": 2,
"aisles": [{
"department_id": 57,
"id": 443,
"name": "Spices",
"rank_offset": 100,
"visible": true
}, {
"department_id": 57,
"id": 444,
"name": "Baking",
"rank_offset": 100,
"visible": true
}, {
"department_id": 57,
"id": 445,
"name": "Condiments",
"rank_offset": 100,
"visible": true
}, {
"department_id": 57,
"id": 446,
"name": "Peanut Butter & Jelly",
"rank_offset": 100,
"visible": true
}, {
"department_id": 57,
"id": 447,
"name": "Oil, Vinegar & Tuna",
"rank_offset": 100,
"visible": true
}, {
"department_id": 57,
"id": 448,
"name": "Oil & Olives",
"rank_offset": 100,
"visible": true
}, {
"department_id": 57,
"id": 449,
"name": "Canned & Jarred Vegetables",
"rank_offset": 100,
"visible": true
}, {
"department_id": 57,
"id": 450,
"name": "Tomato Sauce",
"rank_offset": 100,
"visible": true
}, {
"department_id": 57,
"id": 451,
"name": "Pasta",
"rank_offset": 100,
"visible": true
}, {
"department_id": 57,
"id": 452,
"name": "Grains, Rice & Dried Beans",
"rank_offset": 100,
"visible": true
}, {
"department_id": 57,
"id": 453,
"name": "Soup",
"rank_offset": 100,
"visible": true
}]
}, {
"display_name": "Personal & Home Care",
"id": 56,
"name": "Personal & Home Care",
"rank_offset": 994,
"sort_order": 6,
"visible": true,
"warehouse_id": 2,
"aisles": [{
"department_id": 56,
"id": 435,
"name": "Vitamins & Supplements",
"rank_offset": 30,
"visible": true
}, {
"department_id": 56,
"id": 436,
"name": "Paper Products",
"rank_offset": 20,
"visible": true
}, {
"department_id": 56,
"id": 438,
"name": "Pets!",
"rank_offset": 40,
"visible": true
}, {
"department_id": 56,
"id": 437,
"name": "Cleaning Products",
"rank_offset": 10,
"visible": true
}, {
"department_id": 56,
"id": 778,
"name": "Personal Care",
"rank_offset": 28,
"visible": true
}, {
"department_id": 56,
"id": 779,
"name": "Soap",
"rank_offset": 25,
"visible": true
}]
}
]
thank you for being patient..
谢谢你的耐心..
回答by Rob Quincey
You can't initialize Bootstrap components just with class names after the document has loaded. When you add class names to your components Bootstrap initializes them on page load. If you are adding a component after the page has loaded you will need to initialize it yourself using the 'Via JavaScript' initialization methods listed in the bootstrap docs, i.e. for Dropdowns you would need to fire $('.dropdown-toggle').dropdown()(Bootstrap docs)
您不能在文档加载后仅使用类名初始化 Bootstrap 组件。当您向组件添加类名时，Bootstrap 会在页面加载时初始化它们。如果您在页面加载后添加组件，则需要使用引导程序文档中列出的“通过 JavaScript”初始化方法自行初始化它，即对于下拉列表，您需要触发$('.dropdown-toggle').dropdown()（引导程序文档）
