从json响应加载bootstrap3菜单项 [英] Loading bootstrap3 menu items from json response

问题描述

我正在尝试显示从服务器发送的项目作为引导程序munu项目. 为此，我尝试下面的代码

I am trying to show items send from server as bootstreap munu items. For that I an trying following code

HTML

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown"> <span id="info-count"></span>
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="get-info-list">
            <i class="fa fa-list-alt"></i>
        </a>
        <ul class="dropdown-menu" id="infolist" role="menu">
            <!--Items should be loaded here-->
        </ul>
    </li>
</ul>

脚本

$(document).on('click', '#get-info-list', function(event) {
    event.preventDefault();
    alert('hiiiiiii');
    $.getJSON('getNotification', function(data) {
        console.log(data);
        $("#infolist").append(data);
    });
});

我在这里尝试将li中的数据作为菜单项加载. 我在这里尝试了此代码 http://jsfiddle.net/b0ws91e2 单击get-info-list上的click事件不起作用. 如何使其工作?? 以上是加载json响应或bootstrap菜单的正确方法，提供了一种简单的动态加载数据的简单方法吗?

I am trying here to load data in li as menu items. I tried this code here http://jsfiddle.net/b0ws91e2 click event is not working on click on get-info-list. How to make it work?? Is above is proper way to load json response or bootstreap menu provide any simple way to load data dynamically?

推荐答案

您需要在此类就绪事件中编写js代码

You need to write you js code in ready event like this

$(document).ready( function(){
    $('#get-info-list').on('click', function(event) {
        event.preventDefault();
        alert('hiiiiiii');
        $.getJSON('getNotification', function(data) {
            console.log(data);
            $("#infolist").append(data);
        });
    });
});

参考 http://jsfiddle.net/b0ws91e2/4/

说明:原因是当加载javascript文件和代码时您的代码正在执行，但您的网页DOM尚未准备就绪，因此未在任何特定组件上注册事件.因此，您需要等待DOM准备就绪，因此现在在DOM准备就绪时将执行此代码

Explanation: The reason is that your code is being executed when javascript files and code is being loaded but you web page DOM is not ready, so it is not registering event on any specific component. So you need to wait till DOM get ready, so now this code will be executed when DOM is ready

这篇关于从json响应加载bootstrap3菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！