Question

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

Answer 1

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

});