Click here to Skip to main content
15,846,571 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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:

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>" +
                                   "</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:

JavaScript
//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());
Posted
Updated 20-Dec-16 1:14am
Comments
Peter Leow 20-Dec-16 1:34am    
How to diagnose if you show only a fragment of code? Hit the "improved question" button if you really want help.
pjaar89 20-Dec-16 5:43am    
How are you binding the click event? You forgot to share us the most important part :)
Veena Hosur 20-Dec-16 5:51am    
$(".btnEdit").bind("click", edit_rows);

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
address.push(textval);
});
alert(address[0]);
alert(address[1]);
alert(address[2]);
alert(address[3]);

};
F-ES Sitecore 20-Dec-16 7:00am    
You should use jsfiddle to provide a working example, however the issue is probably related to code like this

$(".btnEdit").bind("click", edit_rows);

you are binding a click event for every element with that class every time you call that code, so if it is called more than once then everything gets one more click event, so if it is called three times as you create items in a loop the first element with that class will have three click events, the second two and the last one, because the first element gets an additional click even when you call the code for the second time, and a third one when you call it for the third time.
Veena Hosur 20-Dec-16 7:12am    
http://jsfiddle.net/x34fseh3/5/


the same example i am using.if i give alert in delete button click same thing is happening

1 solution

Are you sure this line isn't called twice, imbricated in a loop or something? If you bind the click event twice, the handler will be reached twice...

JavaScript
$(".btnEdit").bind("click", edit_rows);


you shoud because this kind of code works:

HTML
<table>
    <tr>
        <td>test</td>
        <td><img src="#" class="btnEdit" /></td>
    </tr>
    <tr>
        <td>test</td>
        <td><img src="#" class="btnEdit" /></td>
    </tr>
</table>


JavaScript
$(".btnEdit").bind("click", edit_rows);
      
function edit_rows() {
    console.log("row clicked");
};


edit:

After reading your fiddle, what happens is normal and is explained above

JavaScript
$("#btnInsert").click(function() {
    $("input[id^=btnDelete]").bind("click", function () { });
});


Each time you click on btnInsert, you bind previous inputs with a new event handler.

A solution would be

JavaScript
var strId = "btnDelete" + rowCnt;
$("input[id=" + strId + "]").bind("click", function () {
    $(this).parent().parent().remove();
});


[Screenshot of the x generated event handlers]
 
Share this answer
 
v2
Comments
Veena Hosur 20-Dec-16 6:42am    
$(".btnEdit").bind("click", edit_rows); this is bind only once
pjaar89 20-Dec-16 8:07am    
No it does not, see the edit of my solution
Veena Hosur 20-Dec-16 23:50pm    
where is insert button here
Veena Hosur 20-Dec-16 23:53pm    
where is inert button here
pjaar89 21-Dec-16 2:35am    
Just read what F-ES Sitecode and I said.

In your fiddle you put your bind() inside btnInsert.click() the fact is you target the same controls over and over... just target the newly created control like I wrote in the solution. We cannot do more to help you

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900