js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现。而事件监听不是,你必须给每一个元素单独绑定事件。
常见的例子是处理表格的时候。每行行末有个删除按钮,点了这个能够删除这一行。
<table> <tbody> <tr> <td>这行原来就有</td> <td><buttonclass="del">删除</button></td> </tr> <tr> <td>这行原来就有</td> <td><buttonclass="del">删除</button></td> </tr> </tbody> </table>
jQuery(function($){ //已有删除按钮初始化绑定删除事件 $(".del").click(function() { $(this).parents("tr").remove(); }); });
<td><buttononclick="deltr(this)">删除</button></td> jQuery(function($){ //添加行 $("#add2").click(function(){ $("#table2>tbody").append('<tr><td>新增行</td><td><button nclick="deltr(this)">删除</button></td></tr>') }); }); //删除行的函数,必须要放domready函数外面 function deltr(delbtn){ $(delbtn).parents("tr").remove(); };
<td><buttonclass="del">删除</button></td> jQuery(function($){ //定义删除按钮事件绑定 //写里边,防止污染全局命名空间 function deltr(){ $(this).parents("tr").remove(); }; //已有删除按钮初始化绑定删除事件 $("#table3 .del").click(deltr); //添加行 $("#add3").click(function(){ $('<tr><td>新增行</td><td><button>删除</button></td></tr>') //在这里给删除按钮再次绑定事件。 .find(".del").click(deltr).end() .appendTo($("#table3>tbody")); }); });
<td><buttonclass="del">删除</button></td> jQuery(function($){ //第四个表格的删除按钮事件绑定 $("#table4").click(function(e) { if (e.target.className=="del"){ $(e.target).parents("tr").remove(); }; }); //第四个表格的添加按钮事件绑定 $("#add4").click(function(){ $("#table4>tbody").append('<tr><td>新增行</td><td><button>删除</button></td></tr>') }); });
.template{display:none;} <trclass="template"> <td>这里是模板</td> <td><button>删除</button></td> </tr> <tr> <td>这行原来就有</td> <td><button>删除</button></td> </tr> <tr> <td>这行原来就有</td> <td><button>删除</button></td> </tr> jQuery(function($){ //第五个表格的删除按钮事件绑定 $("#table5 .del").click(function() { $(this).parents("tr").remove(); }); //第五个表格的添加按钮事件绑定 $("#add5").click(function(){ $("#table5>tbody>tr:eq(0)") //连同事件一起复制 .clone(true) //去除模板标记 .removeClass("template") //修改内部元素 .find("td:eq(0)") .text("新增行") .end() //插入表格 .appendTo($("#table5>tbody")) }); });
<tableid="table6"> <tbody id="tbody6"> <tr> <td>这里是模板</td> <td><button>删除</button></td> </tr> <tr> <td>这行原来就有</td> <td><button>删除</button></td> </tr> <tr> <td>这行原来就有</td> <td><button>删除</button></td> </tr> </tbody> <tfoot> <tr> <td> </td> <td><button id="add6">添加</button></td> </tr> </tfoot> </table> jQuery(function($){ //第六个表格的删除按钮事件绑定 $("#tbody6 .del").click(function() { $(this).parents(".repeat").remove(); }); //第六个表格的添加按钮事件绑定 $("#add6").click(function(){ $("#tbody6>.template") //连同事件一起复制 .clone(true) //去除模板标记 .removeClass("template") //修改内部元素 .find(".content") .text("新增行") .end() //插入表格 .appendTo($("#tbody6")) }); });
<ulid="tbody6"> <li> <span>这里是模板</span> <span><button>删除</button></span> </li> <li> <span>这行原来就有</span> <span><button>删除</button></span> </li> <li> <span>这行原来就有</span> <span><button>删除</button></span> </li> </ul> <script type="text/javascript"></script>