I have this HTML code generating by php code
<tr class="edit_tr">
<td>a1</td>
<td class="edit_td">
<span id=" " class="text"></span>
<input id="144" class="25" type="text" value="">
</td>
<td class="edit_td">
<span id=" " class="text"></span>
<input id="144" class="26" type="text" value="">
</td>
<td class="edit_td">
<span id=" " class="text"></span>
<input id="144" class="27" type="text" value="">
</td>
</tr>
This is the Javascript I am using:
$(document).ready(function(e) {
$(".edit_tr").click(function(){
var id = $(this).attr("id");
// we have here tow states :#1 and #2
//#1 there is no Id, and thats mean we want to insert to database
if(typeof id == 'undefined'){
$(this).children("td").children("input").change(function(){
var stateId = $(this).attr("class");
var alternativeId = $(this).attr("id");
alert("state is :"+ stateId);
alert("alternativeId is :"+ alternativeId);
//return false;
});
}
//#2 there is an id, so we want to update the value
else{
alert("there is id ");
}
});
});
the problem when I change the value of input at first time it works fine, but when I try to change value another time, the change event fires many times
please any help, I appreciate it
I have this HTML code generating by php code
<tr class="edit_tr">
<td>a1</td>
<td class="edit_td">
<span id=" " class="text"></span>
<input id="144" class="25" type="text" value="">
</td>
<td class="edit_td">
<span id=" " class="text"></span>
<input id="144" class="26" type="text" value="">
</td>
<td class="edit_td">
<span id=" " class="text"></span>
<input id="144" class="27" type="text" value="">
</td>
</tr>
This is the Javascript I am using:
$(document).ready(function(e) {
$(".edit_tr").click(function(){
var id = $(this).attr("id");
// we have here tow states :#1 and #2
//#1 there is no Id, and thats mean we want to insert to database
if(typeof id == 'undefined'){
$(this).children("td").children("input").change(function(){
var stateId = $(this).attr("class");
var alternativeId = $(this).attr("id");
alert("state is :"+ stateId);
alert("alternativeId is :"+ alternativeId);
//return false;
});
}
//#2 there is an id, so we want to update the value
else{
alert("there is id ");
}
});
});
the problem when I change the value of input at first time it works fine, but when I try to change value another time, the change event fires many times
please any help, I appreciate it
Share Improve this question edited Nov 5, 2012 at 11:16 Devjosh 6,4864 gold badges40 silver badges61 bronze badges asked Nov 5, 2012 at 11:14 Kamal Kamal 3639 silver badges25 bronze badges 3-
Not strictly related with your question, but use
console.log
for debugging purposes instead ofalert
- it will save you many clicks. – moonwave99 Commented Nov 5, 2012 at 11:17 -
note: you are using class/id wrong. Perhaps store it like this:
data-state="26" data-alternativeId="144"
– Rene Pot Commented Nov 5, 2012 at 11:17 - the click on the row is a little weird. Would you prefer a button ? When will occur the saving action ? – Nicolas Zozol Commented Nov 5, 2012 at 11:24
2 Answers
Reset to default 4Everytime you click on $(".edit_tr"), you add another eventhandler, so thats why the code triggers multiple times
try this code
$(document).ready(function(e) {
$(".edit_tr").click(function(){
var id = $(this).attr("id");
// we have here tow states :#1 and #2
//#1 there is no Id, and thats mean we want to insert to database
if(typeof id != 'undefined'){
alert("there is id ");
}
});
$(".edit_tr").find("input").change(function(){
var stateId = $(this).attr("class");
var alternativeId = $(this).attr("id");
alert("state is :"+ stateId);
alert("alternativeId is :"+ alternativeId);
//return false;
});
});