段落下的onclick事件在该段落下触发

Question

我希望在单击段落时用textarea标记替换该段落，该textarea应该包含该段落中的文本：

<div id="right"><p><pre><?php echo $descri; ?></pre></p></div>

jQuery脚本：

$(function(){
  $('#right').on('click', 'p', function(){
    var $p = $(this);
    var old = $p.html();

    if(/<textarea rows="4" cols="40" id="descri" name="descri"/.test(old))
      return;

    $p.html('<textarea rows="4" cols="40" id="descri" name="descri" value="' + old + '"/>')
       .find('textarea')
       .focus()
       .on('blur', function(){
         var value = this.value;
         $.post('listener_updates.php', {description: value})
          .done(function(){
            $p.html(value);
          })
          .fail(function(){
            $p.html(old);
            alert('Could not update title');
          });
       });
  });
});

现在，当我单击段落文本时，什么都没有发生，但是当我在段落文本下单击一点时，该文本区域就会出现并且为空。 谢谢您的帮助

Answer 1

这是因为您不能在p元素内放置pre 元素 ，因此浏览器会更正无效的DOM。 p的内容模型是短语内容 ，但是pre在短语内容中无效，只有流内容 。

当您将此内容提供给Chrome浏览器时：

<div class="right"><p><pre>This is the text</pre></p></div>

...实际上创建了这个DOM：

<div class"right"><p></p><pre>This is the text</pre><p></p></div>

请注意， pre不再位于任何p 。

如果要使用pre ，只需单独使用pre （不使用p ）。 pre就像p一样：它们都有相同的内容模型，都在相同的地方有效，并且都display: block默认情况下为display: block 。

或者，如果你唯一的目标就是不要有换行等这样的，在现代浏览器，你可以摆脱的pre （保持p或使用div如果语义p是不恰当的），并使用CSS white-space属性 （例如， white-space: pre ）代替。

---

在下面重新发表您的评论：

但我无法在pre标记内获取文本以在textarea上显示

只需将pre的contents()放入textarea ，将textarea放入所需的DOM中，然后删除或隐藏pre 。 例如，将其删除： 实时示例

$(".right").on("click", "pre", function() {
  var $pre = $(this);
  var $textarea = $("<textarea>");
  $textarea.append($pre.contents());
  $pre.replaceWith($textarea);
  return false;
});