CODEWITHSUNDEEP
javascriptjquery
pinklotus
pinklotus

Reputation: 101

Trying to get row data alert. Why am I getting multiple alerts on click?

I am at early stages of learning js and jquery. I am stuck in a problem I dont understand. I have a HTML form where I am collecting user inputs. When submit button is clicked the user input is saved as a new row to a table (Lets call it "myTable"). I got that part done. But now I want to get the row data when I click on a row in myTable. I kind of have that too. I do get the data when clicking on the row, Except when I click on the row I get the same data in alert multiple times. The first time I click on the row I get one alert, the second time two... and so on. Please point out my error.Here is my html:

<div>label>First Name: </label>
<input id="firstname" type="text" name="first name"/>

<br>
<label>Last Name: </label>
<input id="lastname" type="text" name="last name"/>

<input type ="button" value = "Submit" onclick ="addRow()" >
</div>

<table id="myTable" border=1 onclick="load_row()">
        <tr >
            <td>
            First Name
            </td>
            <td>
            Last Name
            </td>
        </tr>
</table>

And here is my javascript: This function adds the user input as new row to the table:

var addRow = function(){
var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;


$("#myTable tr:last").after("<tr><td>" + firstname + "</td><td>" + lastname + "</td></tr>" );   
};

And this function is alerting with the details of the row I click on. This is where I guess I'm doing something wrong:

var load_row = function(){
var rows = $("#myTable tr");

rows.click(function() {
    var data = new Array();
    var cells = $(this).find("td");
    cells.each(function(i, cell) {
        data.push($(cell).text());
    });
    alert(data);
});

};

Upvotes: 0

Views: 1405

Answers (4)

dbf
dbf

Reputation: 3463

It's called bubbling, as soon as you click the TR, you also fire the event click of the TABLE you bound. So you're not just calling addRow, but also load_row, which again binds the .click event on each TR again.

Remove the onclick on the table element and add in a "script" tag somewhere in your "head" tag like

$(document).ready(function() { load_row() });

or add/change in between

row.click => rows.unbind('click').click

Upvotes: 1

j08691
j08691

Reputation: 207901

I cleaned up your code to remove the inline JavaScript calls, used more jQuery ($("#firstname").val(); vs document.getElementById("firstname").value) and used the .on() function to properly bind the new rows added to the table.

jsFiddle example.

jQuery

$('input[value="Submit"]').click(function() {
    var firstname = $("#firstname").val();
    var lastname = $("#lastname").val();
    $("#myTable tr:last").after("<tr><td>" + firstname + "</td><td>" + lastname + "</td></tr>");
});
$("#myTable").on('click', 'tr', function() {
    var data = new Array();
    var cells = $(this).find("td");
    cells.each(function(i, cell) {
        data.push($(cell).text());
    });
    alert(data);
});​

HTML

<div><label>First Name: </label>
<input id="firstname" type="text" name="first name"/>

<br>
<label>Last Name: </label>
<input id="lastname" type="text" name="last name"/>

<input type ="button" value="Submit" >
</div>

<table id="myTable" border=1>
        <tr >
            <td>
            First Name
            </td>
            <td>
            Last Name
            </td>
        </tr>
</table>​

Upvotes: 0

DACrosby
DACrosby

Reputation: 11450

It seems like you are adding a new click event to every row each time the user clicks. So, simply unbind the click event before you add a new one.

rows.unbind("click").click(function() {
  var data = new Array();
  var cells = $(this).find("td");
  cells.each(function(i, cell) {
    data.push($(cell).text());
  });
  alert(data);
});

Upvotes: 0

Nick Kugaevsky
Nick Kugaevsky

Reputation: 2945

It happens cause every time you call load_raw you bind +1 click event to every row. So it's better to use jquery on binding and remove click binding from load_row function.

$('#myTable').on('click', 'tr', load_row())

Upvotes: 1

Related Questions