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

• javascript
• jquery

• Not strictly related with your question, but use console.log for debugging purposes instead of alert - 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 2

Everytime 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;         
   });

});