0

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

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

4

4 回答 4

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

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

于 2013-10-09T22:16:43.533 回答
0

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

$(document).ready(function(){
    $(document).on('click', '#right', function(){
        $("h2").css("background-color","pink");
    })
});
于 2013-10-09T20:20:01.267 回答
0

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

$('div').html('<input type="text" name="abc" />');
于 2013-10-09T20:21:13.237 回答
0

为了“更新”标题，您需要将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');
          });
       });
  });
});

确保将 url 更改为$.post设置侦听器的 url。一个示例监听器如下：

新标题.php

<?php

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

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

?>
于 2013-10-09T20:42:09.860 回答