JQuery event handling

Question

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

Is this the order the JavaScript gets executed? Can you post the full file instead of just pieces? — arb
– arb, Commented Nov 8, 2011 at 20:16
Your html structure you pasted doesn't actually include any of the links with these styles or many of the other elements your messing with via jquery. Can you boil this down to a fully runnable test case and post it on jsfiddle.net? — Derek Prior
– Derek Prior, Commented Nov 8, 2011 at 20:17

Chandu · Accepted Answer · 2011-11-08 20:23:35Z

5

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

edited Nov 8, 2011 at 20:23

answered Nov 8, 2011 at 20:15

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Blazemonger Over a year ago

...or .on if you're running jQuery 1.7

chemestri Over a year ago

thank you it worked for me :D I was unaware about .live() .... thank you very much

Collectives™ on Stack Overflow

JQuery event handling

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related