OnClick событие в пункте срабатывает под пунктом

Question

я Wich заменить абзац с 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

Это связано с тем, что вы не можете поместить pre element внутри p element, поэтому браузер исправляет недопустимый 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.

С другой стороны, если ваша единственная цель состоит в том, чтобы не иметь переносы строк и других подобных, на современные браузеры вы можете избавиться от pre (сохраняя p или с помощью div если семантика p не подходят) и использовать вместо этого используется CSS white-space property (например, white-space: pre).

---

Re ваш комментарий ниже:

, но я не могу получить текст внутри тега заранее, чтобы показать на текстовое поле

Просто поместите pre «ы contents() в textarea, поставьте textarea в DOM, где вы хотите его, и удалите или скройте команду pre. Это удаляет его, например: Live Example

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