JQuery的事件处理

Question

我有一个HTML的结构是这样的：

<div id="nav_holder" style="position:absolute;border-radius:400px;width:0px;height:0px;background-color:#460203;z-index:350px;"> 
<div id="inner_wrap"> 

</div> 
</div> 

我动态把一些HTML代码 “inner_wrap”

var h_h=$("<h1 class='myh1'>"+$(txt).html()+"</h1>"); 
$("#inner_wrap").append(h_h); 
var linkkk=$(document).find("#txt1link").html(); 
$("#inner_wrap").append(linkkk); 

，其中所有的链接都CSS类为“showlink “

我在

$(document).ready(function(){ 
    $("#nav_holder").mouseenter(function(){ 
show=true; 
console.log("in_#nav_holder_mouseenter"); 
}); 
$("#inner_wrap").mouseenter(function(){ 
show=true; 
console.log("in_#inner_wrap_mouseenter"); 
}); 

$(".myh1").mouseenter(function(){ 
show=true; 
console.log("in_myh1_mouseenter"); 
}); 

$(".showlink").mouseenter(function(){ 
show=true; 
console.log("in_showlink_mouseenter"); 
}); 
}); 

写下面的代码

但是我无法获得.showlink的事件和.myh1 任何人都可以引导我。 我是新来的Jquery 仅记录它得到了印刷是 IN_＃nav_holder_mouseenter IN_＃inner_wrap_mouseenter

Answer 1

由于.myh1和.showlink动态添加，使用实时绑定的事件处理程序

试试这个：

$(".myh1").live("mouseenter", function(){ 
    show=true; 
    console.log("in_myh1_mouseenter"); 
}); 

$(".showlink").live("mouseenter", function(){ 
    show=true; 
    console.log("in_showlink_mouseenter"); 
}); 

如果您使用jQuery 1.7，你可以使用开/关的方法，以避免与多个装订样式，如下混淆/问题：

$(".myh1").on("mouseenter", function(){ 
    show=true; 
    console.log("in_myh1_mouseenter"); 
}); 

$(".showlink").on("mouseenter", function(){ 
    show=true; 
    console.log("in_showlink_mouseenter"); 
});