replaceWith() in JQuery

Question

Ich versuche, einen Link zu machen, der beim Klicken in eine Textbox verwandelt wird. Die Textbox ist standardmäßig "fokussiert", und wenn Sie irgendwo außerhalb der Textbox klicken (wodurch sie "unfokussiert" wird), kehrt sie zur ursprünglichen Verknüpfung zurück. Ich versuche, die Funktion replaceWith() in JQuery zu verwenden , aber konnte es nicht richtig bekommen.Die Verknüpfung wird in die Textbox aber und aus irgendeinem Grund, den ich nicht richtig verstehe, kehrt sie nicht in die Verbindung zurück, wenn die Textbox "nicht fokussiert" ist die Geige, die ich geschaffen habe, dies zu veranschaulichen. Kann mir jemand sagen, was ich falsch hier tue.

der Code, den ich verwendet habe, ist,

<script> 
    $(document).ready(function() { 
     $('a.edit').click(function() { 
     var removed = $(this).replaceWith("<input type='text' class='searchBox'/>"); 
     $('input.searchBox').focus(); 
     }); 

     $('input.searchBox').focusout(function() { 
     $(this).replaceWith('<a class="edit" href="#">Edit</a>'); 
     }); 
    }); 
</script> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 

<div class="controls"> 
    <a class="edit" href="#">Replace Link</a> 
</div> 

Vielen Dank. :)

Answer 1

Bringen Ereignisse Mutter .controls Element, Verwendung Ereignis Delegation

$(document).ready(function() { 
 
    $(".controls").on("click", 'a.edit', function() { 
 
    var removed = $(this).replaceWith("<input type='text' class='searchBox'/>"); 
 
    $('input.searchBox').focus(); 
 
    }); 
 

 
    $(".controls").on("focusout", 'input.searchBox', function() { 
 
    $(this).replaceWith('<a class="edit" href="#">Edit</a>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
 
</script> 
 
<div class="controls"> 
 
    <a class="edit" href="#">Replace Link</a> 
 
</div>