jQuery没有运行，没有错误信息。语法错误？

Question

早上好，

jsbin附：http://jsbin.com/kasofufuni/edit?html,css,js,console,output

我试图做一个简单的显示/隐藏功能。我已经减少了你在上面的代码中可以看到的内容，但某种语法错误导致它不能运行或发生错误。我一直在搅拌它几个小时。有任何想法吗？

我得到它在控制台中一次工作，但我一直无法重现。

$(document).ready(function(){ 
    $('nav#global').prepend('<span id="menu-icon">Menu</span> <span id="search-icon">Search</span>'); 

}); 

$('#menu-icon').on('click',function(){ 
    $('nav#global').prepend('You clicked it'); 
}); 

Answer 1

点击事件代码之外的的document.ready所以它运行之前的元素存在

更改为：

$(document).ready(function(){ 
    $('nav#global').prepend('<span id="menu-icon">Menu</span> <span id="search-icon">Search</span>'); 


    $('#menu-icon').on('click',function(){ 
     $('nav#global').prepend('You clicked it'); 
    }); 

}); 

代码，因为元素存在，那么

将运行在控制台罚款

Answer 2

如果您不想将代码包含在您的document.ready函数中，则可以使用一些事件代理：

$(document).on('click', '#menu-icon', function(){ 
    $('nav#global').prepend('You clicked it'); 
});