2012-02-09 205 views
0

我有这段标记。这件作品已经通过ajax加载并附加在div中。文件user-bar.php未触发jQuery事件

内容:

<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文件具有了AJAX返回标记为div#user-area插入。

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

这里有什么问题?

+0

你把这个jQuery代码在ajax调用的回调? – 2012-02-09 16:00:28

+0

不。jquery代码位于主页面。我如何投入回调? – ptamzz 2012-02-09 16:09:24

+0

我把jQuery脚本放在ajax返回的标记中,同时还有'li'项目,但仍然是同样的问题。 – ptamzz 2012-02-09 16:13:46

回答

1

你说得对,有一个与下拉引导冲突(模拟在http://jsbin.com/ijiqec/2/edit )。

出于某种原因(不要问我为什么)上改变使用现场固定的问题。 使用这段代码:

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

+0

非常感谢。有用。但是我必须将js脚本放在'user-bar.php'文件中。 – ptamzz 2012-02-09 18:18:00

1

尝试放置处理程序以点击标记事件。

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

更新: 您不能对所有li标签使用相同的id。 您需要更改李#通知列表的一类,如果你有一个对每个标签,然后更新JS:

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

我试过了,仍然是同样的问题。 – ptamzz 2012-02-09 15:59:03