脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jquery 新建的元素事件绑定问题解决方案,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
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 class="del">删除</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 class="del">删除</button></td></tr>')
});
});
. 代码如下:
.template{display:none;}
<trclass="template">
<td>这里是模板</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td>这行原来就有</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td>这行原来就有</td>
<td><button class="del">删除</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 class="template repeat">
<td class="content">这里是模板</td>
<td><button class="del">删除</button></td>
</tr>
<tr class="repeat">
<td class="content">这行原来就有</td>
<td><button class="del">删除</button></td>
</tr>
<tr class="repeat">
<td class="content">这行原来就有</td>
<td><button class="del">删除</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 class="template repeat">
<span class="content">这里是模板</span>
<span><button class="del">删除</button></span>
</li>
<li class="repeat">
<span class="content">这行原来就有</span>
<span><button class="del">删除</button></span>
</li>
<li class="repeat">
<span class="content">这行原来就有</span>
<span><button class="del">删除</button></span>
</li>
</ul>
<script type="text/javascript"></script>
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-jquery 新建的元素事件绑定问题解决方案全部内容,希望文章能够帮你解决javascript代码实例教程-jquery 新建的元素事件绑定问题解决方案所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。