jQuery事件未触发 [英] jQuery event not triggered

问题描述

我有这个标记.这件作品已通过ajax加载并附加到div中.

I've this piece of markup. This piece has been loaded through ajax and appended inside a 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文件，该文件作为<script type="text/javascript" src="js/scripts.js"></script>

I've scripts.js file as below which is included in the index.php file as <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返回的标记.

index.php file has the div#user-area where the ajax returned markup is inserted.

加载整个页面后，当我单击列表项#notifications-list时，什么也没有发生.但是，当我直接在控制台中键入$('#notifications-list').click()时，日志的确出现了，并且removeClass的确出现了.

After the whole page has been loaded, when I click on the list-item #notifications-list, nothing happens. But when I typed in $('#notifications-list').click() directly in the console, the log does appears and the removeClass does occur.

这可能是什么问题?

推荐答案

您是正确的，下拉菜单存在冲突(模拟为 http://jsbin.com/ijiqec/2/edit ).

You're right, there's a conflict with dropdown bootstrap (simulated at http://jsbin.com/ijiqec/2/edit).

由于某些原因(不要问我为什么)，通过 on 更改了 live 的使用，从而解决了此问题. 使用这段代码:

For some reason (don't ask me why) changing the use of live by on fixed the issue. Use this piece of code:

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

这篇关于jQuery事件未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！