用输入替换标题并更新数据库上的标题

Question

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

Answer 1

• There is no click handler in you code, you can use .on() method
• You should use another script tag for loading .js files, your markup is invalid

• input 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>
  

http://jsfiddle.net/3FKzH/