I have two class .btnn and .sleep_avail sometimes i changes the css of a anchor from .btnn to .sleep_avail

Now i have two function for anchor click

 $('.btnn').click(function () {
     alert('yes btn');
 });

And Second one is

$('.sleep_avail').click(function () {
    alert('yes sleep');
});

Now when i click on the anchor with class sleep_avail which is changed dynamically from btnn class the event written for btnn raised and i get response accordingly. But what i need is that the event for sleep_avail should be raised. Kindly help.

I have two class .btnn and .sleep_avail sometimes i changes the css of a anchor from .btnn to .sleep_avail

Now i have two function for anchor click

 $('.btnn').click(function () {
     alert('yes btn');
 });

And Second one is

$('.sleep_avail').click(function () {
    alert('yes sleep');
});

Now when i click on the anchor with class sleep_avail which is changed dynamically from btnn class the event written for btnn raised and i get response accordingly. But what i need is that the event for sleep_avail should be raised. Kindly help.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Aug 30, 2013 at 8:33 Arturs 1,25455 gold badges2121 silver badges2828 bronze badges asked Aug 30, 2013 at 8:30 sambit.albussambit.albus 25011 gold badge88 silver badges2626 bronze badges 2

• there are many many many posts with same issue. search in SO. – Mr_Green Commented Aug 30, 2013 at 8:32
• A fiddle explaining the steps to reproduce the issues, and what is the desired effect would help a lot – Fabrizio Calderan Commented Aug 30, 2013 at 8:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

Anytime, you use dynamically created tags, you must use

$(document).on('#event','#selector',function () {...});

so here

$(document).on('click','.sleep_avail',function () {...});

Because event handlers bind to the currently elements, they have to exist on the page when .on()is called

Here is the working DEMO http://jsfiddle/ARBdU/

$(document).on('click','.btnn, .sleep_avail',function () {  
 if($(this).hasClass('btnn'))
 {
    ...   
 }
 else if($(this).hasClass('sleep_avail'))
 {      
   ...
 }
});

try

$(document).on('click','.sleep_avail',function () {