Question

我试图将服务器发送的项目显示为bootstreap munu项目。为此我尝试了以下代码

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。如何让它工作？以上是加载json响应或bootstreap菜单提供动态加载数据的简单方法的正确方法吗？

Answer 1

你需要在像这样的准备事件中写js代码

$(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准备就绪时执行

从json响应加载bootstrap3菜单项

1 个答案: