为什么按钮在jquery中单击多次触发 [英] Why button click firing more than once in jquery
问题描述
HI, HI, 这篇关于为什么按钮在jquery中单击多次触发的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
我有带行编辑按钮的html表。当我点击按钮时,它会调用函数morw而不是一次。如果我点击第二行它会调用两次函数。
这是我的代码:
< pre lang =Javascript> if (rowCnt === 0 ){
$( #tblDetails tbody)。append(
< tr> + < td id ='Items + rowCnt + '> + prty + < / td> +
< td id ='dstr'> + districtname + < / td> +
< td id ='nmindar'> + industrialarea + < / td> +
< td id ='plno'> + newStr + < / td> +
< td>< img src = 'images / edit.jpg'class ='btnEdit'>< img src ='images / delete.png'class ='btnDelete'/>< / td> +
< span class =code-string> < / tr>);
}
else {
var dupCount = 0 ;
for ( var i = 0 ; i< rowCnt; i ++){
var num = $( < span class =code-string>#Items + i).html()。toString();
if (id == num){
dupCount ++;
}
}
如果(dupCount === 0 ) {
$( #tblDetails tbody)。append(
< tr> + < td id ='Items + rowCnt + '> + prty + < / td> +
< td id ='dstr'> + districtname + < / td> +
< td id ='nmindar'> + industrialarea + < / td> +
< td id ='plno'> + newStr + < ; / td> +
< td>< img src ='images /edit.jpg'class ='btnEdit'>< img src ='images / delete.png'class ='btnDelete'/>< / td> +
< / tr>);
}
}
$( 。btnEdit)。bind( click, edit_rows);
$( 。btnDelete)。bind( 点击,删除);
}
$(' #Plotinfo')。jqxGrid (' clearselection');
}
else {
alert( 请选择地块)
}
});
// 返回新的寻呼机元素。
return 元素;
}
// 编辑表格中的行
function edit_rows(){
var address = [];
$( this )。nearest(' tr')。find(' td')。not(' :last')。each( function (){
var textval = $( this )。text(); // 这将是每个< td>
address.push(textval)的文字;
} );
alert(地址[ 0 ]);
alert(地址[ 1 ]);
alert(地址[ 2 ]);
alert(地址[ 3 ]);
};
// 删除表格中的行
function 删除(){
var par = $(此跨度>)母体()的父()。; // tr
par.remove();
};
如果我点击第1行我会得到3次alert.if我点击第2行,两次提醒我是get.and如果我点击第3行,我会收到一次警报。
任何人都可以告诉我为什么会这样。
我的尝试:
// var par = $(this).parent()。parent(); // tr
var tdprty = par.children( TD:第n个孩子(1)跨度>);
var tddstr = par.children( TD:第n个孩子(2)跨度>);
var tdindname = par.children( TD:第n个孩子(3)跨度>);
var tdplno = par.children( TD:第n个孩子(4)跨度>);
alert(tddstr.html());
alert(tdindname.html());
alert(tdplno.html());
( #tblDetails tbody)。append(
< tr> + < td id ='Items + rowCnt + '> + prty + < / td> +
< td id ='dstr'> + districtname + < / td> +
< td id ='nmindar'> + industrialarea + < / td> +
< td id ='plno'> + newStr + < / td> +
< td>< img src ='images / edit.jpg'class ='btnEdit'>< img src ='images / delete.png'class = 'btnDelete'/>< / td> +
< / tr> ;跨度>);
}
else {
var dupCount = 0 ;
for ( var i = 0 ; i< rowCnt; i ++){
var num =
( #Items + i).html()。toString();
if (id == num){
dupCount ++;
}
}
如果(dupCount === 0 ) {
( #tblDetails tbody)。append(
< tr> + < td id ='Items + rowCnt + '> + prty + < / td> +
< td id ='dstr'> + districtname + < / td> +
< td id ='nmindar'> + industrialarea + < / td> +
< td id ='plno'> + newStr + < / td> +
< td>< img src ='images / edit.jpg'class ='btnEdit'>< img src ='images / delete.png'class ='btnDelete'/>< / td> +
< / tr>);
}
}
i have html table with row edit button.when i click on button it calls function morw than once. for ex if i click 2nd row it calls function twice.
here is my code:
if (rowCnt === 0) {
$("#tblDetails tbody").append(
"<tr>" + "<td id='Items" + rowCnt + "'>" + prty + "</td>" +
"<td id='dstr'>"+ districtname + "</td>" +
"<td id='nmindar'>" + industrialarea + "</td>" +
"<td id='plno'>"+ newStr + "</td>"+
"<td><img src='images/edit.jpg' class='btnEdit'><img src='images/delete.png' class='btnDelete'/></td>" +
"</tr>");
}
else {
var dupCount = 0;
for (var i = 0; i < rowCnt; i++) {
var num = $("#Items" + i).html().toString();
if (id == num) {
dupCount++;
}
}
if (dupCount === 0) {
$("#tblDetails tbody").append(
"<tr>" + "<td id='Items" + rowCnt + "'>" + prty + "</td>" +
"<td id='dstr'>" + districtname + "</td>" +
"<td id='nmindar'>" + industrialarea + "</td>" +
"<td id='plno'>" + newStr + "</td>" +
"<td><img src='images/edit.jpg' class='btnEdit'><img src='images/delete.png' class='btnDelete'/></td>" +
"</tr>");
}
}
$(".btnEdit").bind("click", edit_rows);
$(".btnDelete").bind("click", Delete);
}
$('#Plotinfo').jqxGrid('clearselection');
}
else {
alert("Please select plots")
}
});
// return the new pager element.
return element;
}
//edit row in table
function edit_rows() {
var address = [];
$(this).closest('tr').find('td').not(':last').each(function () {
var textval = $(this).text(); // this will be the text of each <td>
address.push(textval);
});
alert(address[0]);
alert(address[1]);
alert(address[2]);
alert(address[3]);
};
//delete row in table
function Delete() {
var par = $(this).parent().parent(); //tr
par.remove();
};
if i click on 1st row i am getting 3 times alert.if i click 2nd row, twice alert i am getting.and if i click on 3rd row i am getting alert once.
can any one tell me why i am getting like this
What I have tried:
//var par = $(this).parent().parent(); //tr
var tdprty = par.children("td:nth-child(1)");
var tddstr = par.children("td:nth-child(2)");
var tdindname = par.children("td:nth-child(3)");
var tdplno = par.children("td:nth-child(4)");
alert(tddstr.html());
alert(tdindname.html());
alert(tdplno.html());
("#tblDetails tbody").append(
"<tr>" + "<td id='Items" + rowCnt + "'>" + prty + "</td>" +
"<td id='dstr'>"+ districtname + "</td>" +
"<td id='nmindar'>" + industrialarea + "</td>" +
"<td id='plno'>"+ newStr + "</td>"+
"<td><img src='images/edit.jpg' class='btnEdit'><img src='images/delete.png' class='btnDelete'/></td>" +
"</tr>");
}
else {
var dupCount = 0;
for (var i = 0; i < rowCnt; i++) {
var num =
("#Items" + i).html().toString();
if (id == num) {
dupCount++;
}
}
if (dupCount === 0) {
("#tblDetails tbody").append(
"<tr>" + "<td id='Items" + rowCnt + "'>" + prty + "</td>" +
"<td id='dstr'>" + districtname + "</td>" +
"<td id='nmindar'>" + industrialarea + "</td>" +
"<td id='plno'>" + newStr + "</td>" +
"<td><img src='images/edit.jpg' class='btnEdit'><img src='images/delete.png' class='btnDelete'/></td>" +
"</tr>");
}
}