Question

what i want to achieve is

1. user types in textfield press tab or click next textfield results in removal of input tag replaced by displaying value read from text field (WORKS)

   2.User clicks on this text result in going to edit mode ( textbox with value shown to edit or replace) (WORKS)

User clicks next text field or press tab which results in execution of step1 and so on (DOESNT WORK!)

     $(document).ready(function(){

     $("input#aoneonedata").focusout(function(){
     $(this).remove();
    var aoneone=parseInt($(this).val())||0;
    $(this).remove();
     $("#aoneone").append("<div id='a11'>"+aoneone+"x</div>");

      $("#a11").click(function(){
      $(this).remove();
    $("#aoneone").append("<input type='text'
    id='aoneonedata' value="+aoneone+">");
      });



      });


      });

     <table>
      <tr>
      <td id="aoneone"><input type="text" id="aoneonedata"></td>
      <td id="aonetwo"><input type="text" id="aonetwodata"></td>
       </tr>
       </table>

Answer 1

Thats becouse you lose your focusout binding when you remove your input.

See this fiddle.

If you strictly need to remove the input when you edit, try to reasign the function to focusout after recreating. But if you don’t wont to reasign the focusout binding on each value change, you can do something like this.

Hope this helps.