Why button click firing more than once in jquery

Question

1.00/5 (1 vote)

See more:

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 19-Dec-16 18:36pm

Veena Hosur

Updated 20-Dec-16 0:14am

Add a Solution

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

Veena Hosur 20-Dec-16 7:12am

for every row i want to button so

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

pjaar89 · Accepted Answer · 2016-12-20T00:14:00

Solution 1

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]

Posted 20-Dec-16 0:14am

pjaar89

Updated 20-Dec-16 2:06am

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

Veena Hosur 21-Dec-16 3:52am

can you share with fiddler please

pjaar89 21-Dec-16 8:59am

http://jsfiddle.net/x34fseh3/65/

see line #32

Veena Hosur 22-Dec-16 1:11am

its working for delete button.But i need edit button beside delete button for that its not working.can you help me to solve that also

pjaar89 22-Dec-16 3:29am

http://jsfiddle.net/x34fseh3/66/

If you don't go with this I won't believe in humanity anymore. Please accept the answer

Veena Hosur 22-Dec-16 6:59am

sorry and thank you so much

Veena Hosur 21-Dec-16 6:25am

how dis will work id will different na