将将来的标题替换为文本输入 - replace a future title with a text input

replace a future title with a text input

嗨，我

正在尝试在通过文本输入单击标题时替换标题以修改标题，我正在使用以下代码：

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

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

这是我用来将其背景色转换为粉红色的 jquery 脚本：

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

知道如何用文本输入标签替换此div中的标题吗？以及一旦我在输入字段外单击，如何将修改提交到数据库吗？谢谢

你的 HTML：

<h2 style="cursor:pointer;">Click Me</h2>

您的JS：

$( "body" ).delegate( "h2", "click", function() {
   $( this ).html( '<input type="text" value="yourValue">' ).find('input').focus();
    $("input").focusout(function(){
            $("h2").html( this.value  );
    }).click(function(e){
        e.stopPropagation();
        return true;
    });
});

为了提交您的输入，您可以使用简单的 $.ajax POST 请求进入".focusout"函数或类似 Aust $.post 代码的东西。这是您的选择。只需发送您的数据。

有关详细信息，请参阅演示。

为了"更新"标题，您需要将h2元素中的html替换为设置为当前标题的input元素。然后，您需要添加一个侦听器，以便当用户单击该输入框时，它会向服务器上的其他某个站点发送 AJAX 请求，该站点设置为使用新标题更新数据库。这段代码可以解决问题

$(function(){
  $('#right').on('click', 'h2', function(){
    var $h2 = $(this);
    var old = $h2.html();
    if(/<input type="text"/.test(old))
      return;
    $h2.html('<input type="text" value="' + old + '"/>')
       .find('input')
       .focus()
       .on('blur', function(){
         var value = this.value;
         $.post('/new_title.php', {title: value})
          .done(function(){
            $h2.html(value);
          })
          .fail(function(){
            $h2.html(old);
            alert('Could not update title');
          });
       });
  });
});

请确保将 $.post 中的 url 更改为设置侦听器的 URL。示例侦听器如下所示：

new_title.php

<?php
require('DB.class.php'); //Require your DB Class
if($_POST && $_POST['title']){
  DB::updateTitle($_POST['title']);
}
?>

不确定我是否正确理解您要实现的目标。但是 id 为"right"的元素从何而来？这是从另一个脚本加载的脚本吗？在这种情况下，请尝试

$(document).ready(function(){
    $(document).on('click', '#right', function(){
        $("h2").css("background-color","pink");
    })
});

若要替换div 内容，请使用代码：

$('div').html('<input type="text" name="abc" />');