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

嗨，我正在尝试用文本输入替换标题，以便修改标题，然后将修改提交到数据库，我使用以下代码：

<div style="font-size: 70%;"><h2 class="outer"><?php echo $designation; ?> </h2></div>

这个div是使用另一个脚本加载的，因此不在原始页面上，所以我认为我们必须使用delegate方法

下面是我用来将其背景颜色变为粉红色的jquery脚本：

<script src="jquery-1.10.2.min.js">
  $(document).ready(function(){
     $("#right").delegate("h2","click",function(){
       $("h2").css("background-color","pink");
     });
  });
 </script>

$（文档）.ready（函数（）{
$（“#右”）。委托（“h2”，“单击”，函数（）{
$（“h2”）.css（“背景色”、“粉色”）；
});
});

知道如何用文本输入标记替换这个div中的标题吗？当我在输入字段外单击时，知道如何将修改提交到数据库吗？ 谢谢

• 代码中没有单击处理程序，可以使用

  .on（）

  方法
• 您应该使用另一个脚本标记加载.js文件，您的标记无效

• input

  元素没有结束标记，您应该删除

  
  $（document）.ready（函数（）{//当DOM就绪时
  $（“.outer”）。在（'click'，function（）上{
  如果（this.childrence.length）返回；
  var text=$.trim（this.innerHTML）；
  $（“”）.val（文本）
  .appendTo（$（this）.empty（））
  .focus（）；
  }).on（'blur'，'input'，function（）{
  //收听模糊事件
  //用于将元素替换为其值
  $（this.replace为（$.trim（this.value））；
  })
  })
  

---

对于第一部分，您可能需要研究一下：为了在数据库中更新它，您必须添加代码来构造AJAX请求，该请求将更新数据库中的信息。您的javascript必须位于链接jquery的单独的

标记中。如果您想通过单击触发它，您需要将

onclick

事件添加到您的代码中。不要将

$

用作变量的前缀。请您给我指一个cibled教程，我检查的所有Jquery教程都太通用了。脚本标记中的所有代码都被忽略，由于您指定了一个src。不幸的是，它对我不起作用，可能是Jquery源代码，我对Jquery不太了解。我下载了压缩的Jquery文件，并将其存储在我的项目文件夹中，名为：“Jquery-1.10.2.min.js”，可能问题在于：如果（this.childrent.length）返回；因为我感觉它什么也不做就返回了。@Tarikmokafi你检查过浏览器的JavaScript控制台了吗？它对我有效，你在我的回答中检查过演示了吗？我在控制台上有一条错误消息：GET，但在我创建的单独的小页面中，它即使有错误也能工作message@TarikMokafih这是一个HTTP错误，因此这意味着加载了库，

map

文件是为了调试而加载的。

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