bobafart bobafart - 1 year ago 174
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() );
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download