Question

我正在处理我的第一个jquery插件。它只是一个简单的按钮旋转木马。它有前一个和下一个锚点。它是未触发的上一个和下一个锚点的点击事件。插件的所有元素都是由jquery脚本动态生成的。唯一需要的HTML是：＆lt; div id =“carousel”＆gt;＆lt; / div＆gt;在身体标签内。

脚本：

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

如您所见，我在每个click事件中都有console.debug（）语句。两个人都没有写入控制台。我不明白。他们为什么不开枪？请指教。

Answer 1

曾尝试使用event delegation吗？如果您正在使用动态元素，那么您必须使用它。示例：

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

单击锚点上的事件而不是触发

1 个答案: