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>
<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>
Do have any issues with using contenteditable
?
You can skip the whole jQuery business with
<span class="tb" contenteditable>sdaf</span>
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');
}
})
});