bobafart bobafart - 1 year ago 143
jQuery Question

Jquery: blur not triggering event after clicking out of focus

Trying to have an Ajax event trigger after clicking out of an inline edit. Can't get the blur to trigger when clicking out of focus.


<span class="tb">sdaf</span>


<script src=""></script>
$( "span.tb" ).on( "click", function() {
var $this = $(this); // this is clicked span.
var html = $this.html();
$this.replaceWith('<textarea name="newDesc" style="width:100%;">'+html + '\r\n </textarea>').html().focus();
$this.blur(function() {
alert("out of focus");
// trigger Ajax event here to save new data
$this.replaceWith('<span class="tb">'+html + '\r\n </span>').html();

JS Fiddle:

Answer Source

Do have any issues with using contenteditable ?

You can skip the whole jQuery business with

<span class="tb" contenteditable>sdaf</span>

Here's an example

EDIT If you have to use jQuery, your code could look like this

    function inputGen(el, content){
        var textarea = document.createElement("textarea");
        textarea.className = 'tmpTxt'; = 'newDesc'; = '100%';
        textarea.value = content;



        $('.tmpTxt').on('blur', function(){
          el.html( $(this).val() );

    $( "span.tb" ).on( "click", function() {
        var $this = $(this);

        if( !$this.hasClass('active') ) {
            inputGen( $this, $this.html() );