首页 - 编程开发 - 其他语言 - JavaScript

jQuery中对动态添加的元素绑定事件

2022-11-28 05:57:32 苏内容

标签： jQuery

阅读：2517

在对元素绑定事件时可能会出现没有效果的情况，这个时候就需要考虑，你绑定的元素是否是动态添加的，动态数据也就是使用jQuery添加的数据，下面就是针对动态数据绑定事件的解决方法；

on()方法

自jQuery版本1.7 起on()方法是bind()、live()和delegate()方法的新的替代品。

$(selector).on(event,childSelector,data,function)

event（事件）：必需。规定要从被选元素移除的一个或多个事件或命名空间

childSelector（子选择器）：可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）

data（数据）：可选。规定传递到函数的额外数据

function（函数）：可选。规定当事件发生时运行的函数

$("button").on("click",function(){
alert("按钮被点击了");
});

live()的方法

live()方法在jQuery版本1.7中被废弃，在版本1.9 中被移除，并以on()方法代替

live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）

$(selector).live(event,data,function)

event（事件）：必需，规定添加到元素的一个或多个事件

data（数据）：可选，规定传递到该函数的额外数据

function（函数）：必需，规定当事件发生时运行的函数

$("button").live("click",function(){
//事件触发后弹出框显示按钮被点击
alert("按钮被点击");
});

jquery 操作表格 jQuery操作表格（table）的常用方法、技巧汇总

以下列出13个jQuery操作table常用到的功能：

1.鼠标移动行变色

 $('#table1 tr').hover(function(){
$(this).children('td').addClass('hover')
}, function(){
$(this).children('td').removeClass('hover')
});

方法二：

 
$("#table1 tr:gt(0)").hover(function() {
$(this).children("td").addClass("hover");
}, function() {
$(this).children("td").removeClass("hover");
});

2.奇偶行不同颜色

 $('#table1 tbody tr:odd').css('background-color', '#bbf');
$('#table1 tbody tr:even').css('background-color','#ffc');
//操作class
$("#table1 tbody tr:odd").addClass("odd");
$("#table1 tbody tr:even").addClass("even");

3.隐藏一行

 
$('#table1 tbody tr:eq(3)').hide();
$("#table1 tr td::nth-child(3)").hide();
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});

4.隐藏一列

 $('#table1 tr td::nth-child(3)').hide();

5.删除一行

 // 删除除第一行外的所有行
$('#table1 tr:not(:first)').remove();
// 删除指定行
$('#table1 tr:eq(3)').remove();

6.删除一列

 // 删除除第一列外的所有列
$('#table1 tr th:not(:nth-child(1))').remove();
$('#table1 tr td:not(:nth-child(1))').remove();
// 删除第一列
$('#table1 tr td::nth-child(1)').remove();

7.得到（设置）某个单元格的值

 // 设置table1,第2个tr的第一个td的值。
$('#table1 tr:eq(1) td:nth-child(1)').html('value');
// 获取table1,第2个tr的第一个td的值。
$('#table1 tr:eq(1) td:nth-child(1)').html();

8.插入一行

 // 在第二个tr后插入一行
$('<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>').insertAfter($('#table7 tr:eq(1)'));

9.获取每一行指定的单元格的值

 var arr = [];
$('#table1 tr td:nth-child(1)').each(function (key, value) {
arr.push($(this).html());
});
var result = arr.join(',');

10.全选或全不选

 
//方法零：
$('#all').on('click', function () {
$('input.checkSub').prop('checked', this.checked); // 给当前一起绑定的子选择添加效果
});

//方法一：
//全选或全不选此传入的参数为event 如：checkAll(event)
function checkAll(evt){
evt=evt?evt:window.event;
var chall=evt.target?evt.target:evt.srcElement;
var tbl=$("#table1");
var trlist=tbl.find("tr");
for(var i=1;i<trlist.length;i++){
var tr=$(trlist[i]);
var input=tr.find("INPUT[type='checkbox']");
input.attr("checked",chall.checked);
}
}
//方法二：
//全选或全不选此传入的参数为this 如：checkAll(this)
function checkAll(evt){
var tbl=$("#table1");
var trlist=tbl.find("tr");
for(var i=1;i<trlist.length;i++){
var tr=$(trlist[i]);
var input=tr.find("INPUT[type='checkbox']");
input.attr("checked",evt.checked);
}
}
//方法三：
//全选或全不选此传入的参数为this 如：checkAll(this)
function checkAll(evt){
$("#table1 tr").find("input[type='checkbox']").each(function(i){
$(this).attr("checked",evt.checked)
});
}
//方法四：
//全选或全不选此传入的参数为this 如：checkAll(this)
function checkAll(evt){
$("#table1 tr").find("input[type='checkbox']").attr("checked",evt.checked);
}

11.客户端动态添加行

 
function btnAddRow(){
//行号是从0开始，最后一行是新增、删除、保存按钮行 故减去2
var rownum=$("#table1 tr").length-2;
var chk="<input type='checkbox' id='chk_"+rownum+"' name='chk_"+rownum+"'/>";
var text="<input type='text' id='txt_"+rownum+"' name='txt_"+rownum+"' width='75px'/>";
var sel="<select id='sel_"+rownum+"'><option value='1'>男</option><option value='0'>女</option></select>";
var row="<tr><td>"+chk+"</td><td>"+text+"</td><td>"+sel+"</td><td>"+text+"</td><td>"+text+"</td></tr>";
$(row).insertAfter($("#table1 tr:eq("+rownum+")"));
}

12.客户端删除一行

 
每次只能删除一行，删除多行时出错
function btnDeleteRow(){
$("#table1 tr").find("input[type='checkbox']").each(function(i){
if($(this).attr("checked")){
if(i!=0){//不能删除行标题
$("#table1 tr:eq("+i+")").remove();
}
}
});
}
这个比上面的要好，可以一下删除多个记录
function btnDeleteRow(){
$("#table1 tr").each(function(i){
var chk=$(this).find("input[type='checkbox']");
if(chk.attr("id")!="checkall"){//不能删除标题行
if(chk.attr("checked")){
$(this).remove();
}
}
});
}

13.客户端保存

 
function btnSaveClick(){
//find()方法中我暂时不知道如何设定多个筛选条件，所以下面得不到select列表的值
//$("#table1 tr td").find("input[type='text']" || "select").each(function(i){
//alert($(this).val());
//});            
$("#table1 tr").find("td").each(function(i){
if($(this).find("input[type='text']").length>0){
alert($(this).find("input[type='text']").val());
}else if($(this).find("select").length>0)
{
alert($(this).find("select").val());
}
});
}

扩展阅读

[jQuery] JQuery方法查询大全【重要】
[jQuery] jQuery中对动态添加的元素绑定事件
[jQuery] jquery中Json操作
[jQuery] jquery+javascript触发a标签的点击事件，模拟鼠标单击

	$('#table1 tr').hover(function(){
	$(this).children('td').addClass('hover')
	}, function(){
	$(this).children('td').removeClass('hover')
	});


	$("#table1 tr:gt(0)").hover(function() {
	$(this).children("td").addClass("hover");
	}, function() {
	$(this).children("td").removeClass("hover");
	});

	$('#table1 tbody tr:odd').css('background-color', '#bbf');
	$('#table1 tbody tr:even').css('background-color','#ffc');
	//操作class
	$("#table1 tbody tr:odd").addClass("odd");
	$("#table1 tbody tr:even").addClass("even");


	$('#table1 tbody tr:eq(3)').hide();
	$("#table1 tr td::nth-child(3)").hide();
	$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});

	// 删除除第一行外的所有行
	$('#table1 tr:not(:first)').remove();
	// 删除指定行
	$('#table1 tr:eq(3)').remove();

	// 删除除第一列外的所有列
	$('#table1 tr th:not(:nth-child(1))').remove();
	$('#table1 tr td:not(:nth-child(1))').remove();
	// 删除第一列
	$('#table1 tr td::nth-child(1)').remove();

	// 设置table1,第2个tr的第一个td的值。
	$('#table1 tr:eq(1) td:nth-child(1)').html('value');
	// 获取table1,第2个tr的第一个td的值。
	$('#table1 tr:eq(1) td:nth-child(1)').html();

	// 在第二个tr后插入一行
	$('<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>').insertAfter($('#table7 tr:eq(1)'));

	var arr = [];
	$('#table1 tr td:nth-child(1)').each(function (key, value) {
	arr.push($(this).html());
	});
	var result = arr.join(',');


	//方法零：
	$('#all').on('click', function () {
	$('input.checkSub').prop('checked', this.checked); // 给当前一起绑定的子选择添加效果
	});


	function btnAddRow(){
	//行号是从0开始，最后一行是新增、删除、保存按钮行故减去2
	var rownum=$("#table1 tr").length-2;
	var chk="<input type='checkbox' id='chk_"+rownum+"' name='chk_"+rownum+"'/>";
	var text="<input type='text' id='txt_"+rownum+"' name='txt_"+rownum+"' width='75px'/>";
	var sel="<select id='sel_"+rownum+"'><option value='1'>男</option><option value='0'>女</option></select>";
	var row="<tr><td>"+chk+"</td><td>"+text+"</td><td>"+sel+"</td><td>"+text+"</td><td>"+text+"</td></tr>";
	$(row).insertAfter($("#table1 tr:eq("+rownum+")"));
	}


	每次只能删除一行，删除多行时出错
	function btnDeleteRow(){
	$("#table1 tr").find("input[type='checkbox']").each(function(i){
	if($(this).attr("checked")){
	if(i!=0){//不能删除行标题
	$("#table1 tr:eq("+i+")").remove();
	}
	}
	});
	}
	这个比上面的要好，可以一下删除多个记录
	function btnDeleteRow(){
	$("#table1 tr").each(function(i){
	var chk=$(this).find("input[type='checkbox']");
	if(chk.attr("id")!="checkall"){//不能删除标题行
	if(chk.attr("checked")){
	$(this).remove();
	}
	}
	});
	}


	function btnSaveClick(){
	//find()方法中我暂时不知道如何设定多个筛选条件，所以下面得不到select列表的值
	//$("#table1 tr td").find("input[type='text']" \|\| "select").each(function(i){
	//alert($(this).val());
	//});
	$("#table1 tr").find("td").each(function(i){
	if($(this).find("input[type='text']").length>0){
	alert($(this).find("input[type='text']").val());
	}else if($(this).find("select").length>0)
	{
	alert($(this).find("select").val());
	}
	});
	}

jQuery中对动态添加的元素绑定事件

on()方法

live()的方法

码农at突泉

jquery 操作表格 jQuery操作表格（table）的常用方法、技巧汇总