用文本输入替换将来的标题

Question

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

<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中的标题吗？ 当我在输入字段之外单击时，如何将修改提交到数据库？ 谢谢

Answer 1

您的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的代码。 这是您的选择。 只需发送您的数据即可。

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

Answer 2

不知道我是否正确理解您要达到的目标。 但是，标识为“ right”的元素从何而来？ 这是从另一个脚本加载的吗？ 在这种情况下，请尝试

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

Answer 3

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

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

Answer 4

为了“更新”标题，您需要用设置为当前标题的input元素替换h2元素中的html。 然后，您需要添加一个侦听器，以便当用户从该输入框中单击时，它将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']);
}

?>