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

有关详细信息，请参阅Demo。

Answer 2

不确定我是否正确理解您要实现的目标。但是具有id＆＃34; right＆＃34;的元素在哪里？来自？这是从另一个脚本加载的吗？在这种情况下，请尝试

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

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

$(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中的网址更改为您设置收听者的网址。一个示例监听器就像：

<强> new_title.php

<?php

require('DB.class.php'); //Require your DB Class

if($_POST && $_POST['title']){
  DB::updateTitle($_POST['title']);
}

?>

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

4 个答案: