为什么按钮在jquery中单击多次触发 [英] Why button click firing more than once in jquery

问题描述

HI，

我有带行编辑按钮的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>）;


}

}

HI,
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>"); } }

这篇关于为什么按钮在jquery中单击多次触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！