CODEWITHSUNDEEP
jqueryhtmlcss
chemestri
chemestri

Reputation: 41

JQuery event handling

I have a html structure like this : 

 <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>

I am dynamically putting some html code in "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);

where as all the link have css class as "showlink"

I am writing following code in

$(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");
});
});

However i am unable to get the events for .showlink and .myh1 can anybody please guide me. I am new to Jquery Only log which got printed was in_#nav_holder_mouseenter in_#inner_wrap_mouseenter

Upvotes: 2

Views: 76

Answers (1)

Chandu
Chandu

Reputation: 82963

Since .myh1 and .showlink are added dynamically, use live to bind event handlers

Try this:

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

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

If you are using jQuery 1.7 you can use on/off methods to avoid any confusion/issues with multiple binding styles as below:

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

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

Upvotes: 5

Related Questions