Reputation: 2245
I have a table with delete and refresh buttons at every row of table in my app.When I click on this buttons my app adds proper rows to table but 2,4,8 times after 1,2,3 clicks on this buttons respectively. Here is fragments of code with creating a table and handler of buttons.
$(document).ready(function(){
var methodSelector= {methodName:$.cookie("methodName"), filter: $.cookie("filter")};
$("table.mainTable").empty();
$("table.mainTable").prepend(filter_head_rows[$.cookie("filter")]);
var appendingTable=$.ajax({
url : "database_functions.php",
type: "POST",
data : methodSelector,
success: function(data, textStatus, jqXHR)
{
$("table.mainTable").append("<tbody>");
$("table.mainTable").append(data);
$("table.mainTable").append("</tbody>");
},
error: function (jqXHR, textStatus, errorThrown)
{
},
});
})
.on("click", ".deleteParticipant", function() {
var id={id:$(this).parent().parent().find('td#idOfParticipant').html()};
$.ajax({
url:"delete.php",
type: "POST",
data: id,
success: function(data, textStatus, jqXHR)
{
$.cookie("currentPage","content")
$("#mainContent").load($.cookie("currentPage")+".html");
}
});
})
.on("click","#refresh", function(){
if ($("#partner").is(":checked"))
{
var partner="true";
}
else{
var partner="false";
}
var currentData={
ticketNumber:$("#ticketNumber").val(),
paymentDate:$("#paymentDate").val(),
issueDate:$("#issueDate").val(),
fio:$("#fio").val(),
birthDate:$("#birthDate").val(),
workNumber:$("#workNumber").val(),
mobileNumber:$("#mobileNumber").val(),
email:$("#email").val(),
lpu:$("#lpu option:selected").text(),
structuralSubdivision:$("#structuralSubdivision").val(),
position:$("#position").val(),
category:$("#category").val(),
categoryDate:$("#categoryDate").val(),
diploma:$("#diploma").val(),
speciality:$("#speciality").val(),
degree:$("#degree").val(),
secondDiploma:$("#secondDiploma").val(),
chamber:$("#chamber option:selected").text(),
notice:$("#notice").val(),
partner:partner
};
})
A table:
<table class="mainTable table table-striped"> <thead> <tr> <th></th> <th>Номер удостоверения</th> <th>ФИО</th> <th>Дата рождения</th> <th>ЛПУ</th> <th>Должность</th> <th>Моб. тел.</th> <th>Раб. тел.</th> <th>e-mail</th> </tr> </thead> <tbody><tr><td><a href="#" class="btn btn-primary btn-mini deleteParticipant"><i class="icon-white icon-ok"></i>У</a>
<a href="#" class="btn btn-primary btn-mini editParticipant" data-toggle="modal" data-target="#modalWindow"><i class="icon-white icon-ok"></i>Р</a><a href="#" class="btn btn-primary btn-mini participantINFO" data-toggle="modal" data-target="#modalWindowView"><i class="icon-white icon-ok"></i>П</a></td><td id="idOfParticipant">1</td><td>Иванов Иван Иванович</td><td>0000-00-00</td><td>lpu345</td><td>хирург</td><td>+79001234567</td><td>+79001234567</td><td>[email protected]</td></tr><tr><td><a href="#" class="btn btn-primary btn-mini deleteParticipant"><i class="icon-white icon-ok"></i>У</a>
<a href="#" class="btn btn-primary btn-mini editParticipant" data-toggle="modal" data-target="#modalWindow"><i class="icon-white icon-ok"></i>Р</a><a href="#" class="btn btn-primary btn-mini participantINFO" data-toggle="modal" data-target="#modalWindowView"><i class="icon-white icon-ok"></i>П</a></td><td id="idOfParticipant">32</td><td>Иванов Иван Иванович</td><td>0000-00-00</td><td>lpu345</td><td>хирург</td><td>+79001234567</td><td>+79001234567</td><td>[email protected]</td></tr></tbody></table>
Upvotes: 0
Views: 48
Reputation: 9556
Your JS code is probably in the "row" itself, and when you add a new row,
the .on("click"...)
trigger is doubled.
Move this JS code outside the template code that is loaded.
Upvotes: 1