New appended button function/event doesn't work if I make its copy using HTML() and append()

Question

0.00/5 (No votes)

See more:

I'm trying to make copy of table row dynamically on button click and appending it to the same table.
But the new added row's contains a button with a click event and is not working instead it refresh the page.
First row's button works fine

What I have tried:

<pre><table id="tblEmployee" class="table-bordered table-striped table-condensed cf">
        <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Emial ID</th>
                <th>Phone No.</th>
                <th>Salary</th>
        	<th>Campany</th>
        </tr>
	<tr>
                <td>XDF10002</td>
                <td>Zeeshan Ali</td>
                <td>zeeshan.cool@yahoo.com</td>
                <td>
                	<button id="btnEventCheck" class="btn btn-danger">Button</button></td>
                <td>96000</td>
        	<td>CASHIT Pvt. Ltd.</td>
	</tr>
</table>
<br />
<asp:Button ID="btnTest" runat="server" class="btn btn-primary" Text="Test" />
<asp:Button ID="btnAppend" runat="server" class="btn btn-success" Text="Append" />
<asp:Button ID="btnGetTableData" runat="server" class="btn btn-warning" Text="Get Table Data" />


<script type="text/javascript">
        $(document).ready(function () {
            $("#btnAppend").click(function () {
                var trTag = $("#tblEmployee tr:eq(1)").html();
                var trTag_ = "<tr>" + trTag + "</tr>";
                //alert(trTag_);
                $("#tblEmployee").append(trTag_);
                return false;
            });

            $("#btnEventCheck").click(function () {
                alert("Testified");
                return false;
            });
        });
    </script>

Posted 6-Jun-17 20:47pm

Bit2 Developer

Updated 7-Jun-17 5:22am

Add a Solution

Comments

F-ES Sitecore 7-Jun-17 5:27am

You'll need to attach the click event to the row you've just created.

3 solutions

Solution 1

The button is having an id property which should be unique. When you copy and append, it again appends the button with the same id. So, your html structure is wrong now.

Try having class for the button and remove the id. Will look like below.

<button class="btnEventCheck" class="btn btn-danger">Button</button>

$(".btnEventCheck").click(function () {
    alert("Testified");
    return false;
});

Posted 6-Jun-17 23:51pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

Richard Deeming 7-Jun-17 11:19am

Trouble is, that will only wire up handlers for the elements which exist at the time. Any new matching elements which are added to the document later will not have this handler attached.

You'd need to use a delegated event to handle the newly-added buttons: .on() | jQuery API Documentation[^]

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 9-Jun-17 3:41am

Oh got your point Richard. Thanks :)

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)

Karthik_Mahalingam · Accepted Answer · 2017-06-07T02:34:00

Solution 2

Add the event handler separately and try.

<button id="btnEventCheck" onclick="return funEventCheck()" class="btn btn-danger  ">Button</button></td>

function funEventCheck() {

              alert("Testified");
              return false;
      }

Posted 7-Jun-17 2:34am

Karthik_Mahalingam

Updated 7-Jun-17 2:35am

Richard Deeming · Accepted Answer · 2017-06-07T05:22:00

As mentioned in Solution 1, you shouldn't have multiple elements with the same id; you should use an alternative method to identify the button.

But you're also going to find that the method you're using to wire up the event handler only works for elements which already exist. It won't handle elements which you add to the DOM later.

To fix that, you'll need to use delegated events.

<button class="btnEventCheck" class="btn btn-danger">Button</button>

$("#tblEmployee").on("click", ".btnEventCheck", function(){
    alert("Testified");
    return false;
});

.on() | jQuery API Documentation[^]