javascript - Jquery:点击失去焦点后模糊不触发事件

Question

单击内联编辑后尝试触发 Ajax 事件。点击失焦时无法触发模糊。

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/

Answer 1

使用 contenteditable 是否有任何问题？

你可以跳过整个 jQuery 业务

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

Here's an example

编辑如果您必须使用 jQuery，您的代码可能看起来 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');
        }
   })
});