click event on anchor not firing

Question

I'm working on my first jquery plugin. It's just a simple carousel of buttons. It has previous and next anchors. It's the click events for the previous and next anchors that aren't firing. All the elements of the plugin are generated dynamically by the jquery script. The only html required is: <div id="carousel"></div> inside the body tags.

Script:

(function ( $ ) {

//create the array of days
var day_names = new Array("SUN","MON","TUE","WED","THU","FRI","SAT");
//The number of days in any given month.
var days_in_month = 0;
//the day of the month the first day lands on. In reference to the index of day_names array.
var starting_day = 0;
//Keep track if div.slides already has been loaded or not.
var loaded = false; 

$.fn.button_carousel = function(number_of_days, startingday){
  console.debug("initializing button carousel");
  days_in_month = number_of_days;
  starting_day = startingday;
  //Create initial carousel interface
  var container = $('div#carousel');
  container.append('<div id="nav_previous"><a href="#" id="prev"></a></div><div id="slides"><ul></ul></div><div id="nav_next"><a href="#" id="next"></a></div>');
  //populate unordered list with input type button elements.
  populate_carousel(number_of_days, startingday);     
  return this;    
};

$('div#carousel').on('click', 'a#prev', function(event) {
    event.preventDefault();
    console.debug("prev click");
});

$('div#carousel').on('click', 'a#next', function(event) {
    event.preventDefault();
    console.debug("next click");
});

function populate_carousel(number_of_days, startingday ) {
    days_in_month = number_of_days;
    starting_day = startingday;
    var index = starting_day;
    //alert("populating");
    if(loaded === false)
    {
      //first time loading input elements
      var container = $('div#slides ul');

      for(var i = 1; i < days_in_month; i++)
      {
        container.append('<li><input type="button" id="' + i + '" class="btn" value="' + day_names[index] + " " + i + '"></li>');
        if(index < 6)
           index++;
        else
           index = 0; //reset           
      }

      loaded = true;
    }
    else
    {
      var index = starting_day;
      //NOT the first time loading input elements
      var container = $('div#slides ul');
      //remove all the buttons
      container.remove('.btn');
      //then repopulate them
      for(var i = 1; i < days_in_month; i++)
      {
        container.append('<li><input type="button" id="' + i + '" class="btn" value="' + day_names[index] + " " + i + '"></li>');
        if(index < 6)
           index++;
        else
           index = 0; //reset           
      }

      loaded = true;

    }
}   

}( jQuery ));

CSS:

#carousel {
background-color: #ccffcc;
width:400px;
height:40px;    
margin:0 auto;
position:relative;
border:1px solid #ccc;
}

#carousel div{ display: inline-block;}

/* Styling for prev button */
#nav_previous {
padding:0 0 0 0;    
position:absolute;
top:5;
left:5;
width:30px;
height: 30px;   
}

#slides {
overflow:hidden;
/* fix ie overflow issue */
position:absolute;
width:300px;
height:30px;
border:1px solid #ccc;
top:5;
left:47;
background-color: #F5F6CE;
}

/* remove the list styles, width : item width=85 * total items=31 */    
#slides ul {
position:relative;
left:0;
top:0;
list-style:none;
margin:0;
padding:0;  
width:2635px;           
}

/* width of the item, in this case I put 250x250x gif */
#slides li {
width:85px;
height:30px;    
float:left;
}

/* Styling for next button */
#nav_next {
padding:0 0 0 0;    
position:absolute;
top:5;
left:364;
width:30px;
height: 30px;   
}

#nav_previous a {
display:block; 
width:31px; 
height:32px;
text-indent:-999em; 
outline:0;  
}

#nav_next a {
display:block; 
width:31px; 
height:32px;
text-indent:-999em; 
outline:0;  
}

a#prev {
  background:url(images/left_black_arrow.png) no-repeat; 
}

a#prev:hover {
  background:url(images/left_white_arrow.png) no-repeat;
}

a#next {
  background:url(images/right_black_arrow.png) no-repeat; 
}

a#next:hover {
  background:url(images/right_white_arrow.png) no-repeat;
}

input.btn {
 height:30px;
 width:85pm;
 padding-right: 5px;
 padding-left: 5px;
}

.clear {clear:both}

HTML:

<html>
<head>
<title>Carousel</title>
<link rel="stylesheet" type="text/css" href="button_carousel.css">
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" carset="utf-8" src="button_carousel.js"></script>

<script>
$(document).ready(function() {
  //October has 31 days, therefore 31 buttons are required.
  var carousel = new $.fn.button_carousel(31,4);
});
</script>
</head>
<body>
<div id="carousel"></div>
</body>
</html>

As you can see, I have console.debug() statements inside each click event. Neither one writes to the console. I don't get it. Why won't they fire? Please advise.

Answer 1

Ever try using event delegation ? If you're working with dynamic element, then you must use this. Example :

$('#carousel').on('click', 'a#prev', function() {..});
// or
$('body').on('click', 'a#prev', function() {..});