jquery - Issue with focusin() and click()

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

那是因为您focusout在删除输入时失去了绑定。

看到这个小提琴。

如果您在编辑时严格需要删除输入，请尝试focusout在重新创建后重新分配功能。但是，如果您不想focusout在每次值更改时重新签名绑定，您可以执行类似的操作。

希望这可以帮助。