Hi I'm trying to replace a title when clicking on it by a text input in order to modify the title and then submit the modification to the database, I'm using this code :
<div style="font-size: 70%;"><h2 class="outer"><?php echo $designation; ?> </h2></div>
this div is loaded using another script and therefore is not on the original page, so I think we must use the delegate method.
Here is the jquery script I'm using to turn its background color to pink:
<script src="jquery-1.10.2.min.js">
$(document).ready(function(){
$("#right").delegate("h2","click",function(){
$("h2").css("background-color","pink");
});
});
</script>
Any idea how to replace the title in this div by a text input tag ? and any idea how to submit the modification to the database once I click outside the input field ? thank you
.on() methodinput element doesn't have closing tag, you should remove the </input>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){ // When the DOM is ready
$(".outer").on('click', function() {
if ( this.children.length ) return;
var text = $.trim(this.innerHTML);
$("<input>").val(text)
.appendTo($(this).empty())
.focus();
}).on('blur', 'input', function() {
// Listening to blur event
// for replacing the element with it's value
$(this).replaceWith( $.trim(this.value) );
})
})
</script>