Jquery: blur not triggering event after clicking out of focus

Question

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.

HTML:

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

JQUERY:

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

<script>

 $('document').ready(function(){   

    $( "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();       

      })

    })

 });

</script>

JS Fiddle:

https://jsfiddle.net/4mvj8dg6/2/

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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

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

        el.html(textarea);

        $('.tmpTxt').focus();

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

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

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

Jquery: blur not triggering event after clicking out of focus

Sign up