Question

我有这个标记。这件作品已经通过ajax加载并附加在div中。

文件内容user-bar.php：

<div id="u-bar">
    <ul id="u-nav" class="nav">
        <li id="notifications-list" class="dropdown" data-time="" >
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="icon-comment"></i>
            Notifications
            <b class="caret"></b>
            </a>
            <ul class="dropdown-menu" >
                <li><a href="#">Notification One</a></li>
                <li><a href="#">Notification two</a></li>
                <li class="divider"></li>
                <li><a href="#">Show All Notifications</a></li>
            </ul>
        </li>
        <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="icon-user"></i>
            Profile
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">View Profile</a></li>
            <li><a href="#">Settings</a></li>
        </ul>
    </li>
    <li><a href="php/logout.php">Logout</a></li>
    <div class="clear"></div>
    </ul>
</div>

我scripts.js文件如下所示，index.php文件中包含<script type="text/javascript" src="js/scripts.js"></script>

$(function(){
    loadUserBar();

    $('#notifications-list').live('click', function(){
        console.log('Test');
        $('#notifications-list .icon-comment').removeClass('new');
    });
});

function loadUserBar(){
     $('#user-area').load('php/user-bar.php', function(){
         initBootstrapElems(); //Initializing All popover elements
     });    
}

index.php文件包含div#user-area，其中插入了ajax返回的标记。

加载整个页面后，当我点击列表项#notifications-list时，没有任何反应。但是当我直接在控制台中输入$('#notifications-list').click()时，会显示日志，并且removeClass确实会出现。

这里可能有什么问题？

Answer 1

尝试将处理程序单击标记事件。

$('#notifications-list a').live('click', function(){ ... })

更新：您不能对所有li标签使用相同的ID。如果你在每个标签上都有li，那么你需要将li。＃notifications-list更改为一个类，然后更新js：

$('.notifications-list a').live('click', function(){ ... })

Answer 2

你是对的，与下拉引导程序有冲突（在http://jsbin.com/ijiqec/2/edit处模拟）。

出于某种原因（不要问我为什么）通过更改实时的使用修复了问题。使用这段代码：

$('#notifications-list').on('click',...

jQuery事件未触发

2 个答案: