Web开发有时候我们需要动态生成 节点,例如 菜单 按钮之类的,但是还需要给其绑定事件.
实现方式肯定有好多种,但是这里推荐一种:
通过jQuery 动态给 class 属性绑定事件.
解决方法，使用 jQuery 的 live(),
点此查看详细介绍
.
通过 live() 方法为附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。
<script type="text/javascript">
$(function () {
$(".test").live("click",function(event){
</script>
那么之后 添加
<div class="test"></div>
,都会绑定 click 事件.
注意
: 由于 jQuery 版本 1.7 后, on() 方法是 bind()、live() 和 delegate() 方法的新的替代品，建议使用新的API,
点此查看 on() 的详细介绍
：
$(document).on("click",".test",function(event){
在jQuery中，对于元素的属性操作相对于JavaScript来说代码要简单很多，这次主要介绍几个常用的jQuery中的属性操作。
首先先写一个简单的盒子出来用作案例演示：
这个是html的部分，构造了一个盒子和几个用于点击事件的按钮：<body>
<button>添加一个红色背景</button>
<button>移除红色背景</button>
<button>判断有没
这两天工作中遇到使用js动态加载内容，同时需要对加入的内容绑定点击事件的，当时想想了想可以使用内联的onclick 来实现，后来没有这样做，使用的是 on(‘click’,function(){}) ,然而使用on方法的时候就发现，on 对同一个元素多次绑定同一个事件的时候，这个事件就会执行多次。
下面给出这种情况的实例：
$(function(){
$(".add").click(function(eve){
$(".btn-area").append("<button class='test-btn'>test button</button>");
//$(".test-
页面上经常会有弹窗，有的弹窗是动态生成的，有的弹窗是在页面底部隐藏的，对于动态生成的弹窗，如果要监听弹窗的
事件，可以使用
jQuery的
事件绑定on()方法实现。
如图，弹窗是js动态生成的，通过点击某个链接弹出，弹窗中的“立即去使用”链接点击后，实现的效果是关闭弹窗，并跳转到锚点。
这个a标签是：
立即去使用
Jquery 给多个含义相同class属性的元素，统一添加单击事件
这里用常规的 $(".className").click 发现不管用 那么就需要用到下面这个方法了
html:
<input type="button" class="delBtn" value="删除1"/>
<input type="button" class="delBtn" value="删除2"/>
<input type="button" class="delBtn" value="删除3"/>
网站首页没有一点动画怎么可以，我以前用过Flash As3做过图片切换，效果非常不错，可是麻烦，改变起来麻烦。一直都想自己做个图片切换效果，总认为比较麻烦，今天自己实践了一下，其实还比较简单。不过有个小问题，IE8不兼容模式下 设置有透明效果的div 样式添加失效了，但是我用谷歌，IE8兼容测试都ok。
反正是给自己记录的，也不多话了，js没有与页面分离，也没有做出插件。一个网站要不了几个这种效果，先实现了再说吧。最后的效果还是很高大上的。
页面+JS代码
代码如下:
[removed]
var picCurrent = 1;
<button class="btn1">month1</button>
<button class="btn1">month2</button>
<button class="btn1">month3</button>
若要给上面3个都具有btn1的class的按钮，添加同样的点击事件，则如下操作：
$(".btn1")....
on()方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）
$("#mainbody").on(“click”,".link",function(){
on前面的这个#mainbody一定要是html中存在的，静态的,否则点击事件触发不了
“.link"是动态加载出来的内容，它的class=”.link"
on方法在什么条件下都是成立的
用jquery:为动态加载的元素添加点击事件其实也可以用
$(".link").click(function(){
只不过是有限制的，这
<select
class="select1">
<option value="1">1</option>
<option value="2"></option>
</select>
<select
class="select2">
当页面加载时，就会注册所有的事件，后面通过jquery新增的内容（<div class="item"></div>），再对新增的添加事件$(".item").click(function(){})；页面是不会执行的，
由于jquery1.9后的版本已经把live()方法删除了，所以最好使用on()方法：
$(document).on("click",".item",
<ul
class="tabs">
<li
class="active"><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
<div
class="tab-content">
<div id="tab1"
class="tab-pane active">Tab 1 Content</div>
<div id="tab2"
class="tab-pane">Tab 2 Content</div>
<div id="tab3"
class="tab-pane">Tab 3 Content</div>
.tab-container {
margin: 20px;
.tabs {
list-style: none;
margin: 0;
padding: 0;
.tabs li {
display: inline-block;
margin-right: 10px;
.tabs li a {
display: block;
padding: 5px 10px;
background-color: #eee;
color: #333;
text-decoration: none;
.tabs li.active a {
background-color: #333;
color: #fff;
.tab-content .tab-pane {
display: none;
padding: 10px;
.tab-content .active {
display: block;
JavaScript:
$(document).ready(function() {
$('.tabs li').click(function() {
var tab_id = $(this).find('a').attr('href');
$('.tabs li').remove
Class('active');
$('.tab-content .tab-pane').remove
Class('active');
$(this).add
Class('active');
$(tab_id).add
Class('active');
这个组件使用了
jQuery 库，它会在页面加载完成后执行一个函数，该函数会
绑定标签页的点击
事件。当用户点击标签页时，它会从链接中获取标签页的 ID，然后将所有标签页的选中状态和内容区域的显示状态重置，最后将当前标签页的选中状态和内容区域的显示状态设置为活动状态。
