为什么我的填充文本区域的功能只能在第一次使用？

Question

Javascript:

function editQuestion() {
  $("body").on("click", ".edit_question", function(event) {
    $(this).closest("form").find("textarea").text("sample text");
    event.preventDefault();
  });
}

$(document).ready(function() {  
  editQuestion();
});

HTML:

<form>
  <textarea>ormar</textarea>
  <div class="actions">
    <a href="#" class="edit_question">Cancel</a>
  </div>
</form>

When firing off the function by clicking the .edit_question link, everything is working as expected the first time.

But clicking more times (after manually removing the textarea content) doesn't do anything, why is this?

Answer 1

.text() only changes the initial value of the textarea, since the initial value is read from the element's content ( <textarea>Initial value</textarea> ).

Once you modified the value, the current value is stored in the value property of the DOM element. Changing the initial value after the textarea was modified doesn't have any effect.

That's why you should use .val() intead of .text() .

Answer 2

Updated Demo compare with Original Demo

Use .val() instead of .text() in case of inputs.

Check this,

$(document).ready(function () {
    $(document).on("click", ".edit_question", function (event) {

        $(this).closest("form").find("textarea").val('sample text');
        event.preventDefault();
    });
});

Note: The .text() method cannot be used on form inputs or scripts.

Answer 3

Try using the .val() method rather than .text() method for textarea

From documentation page: The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method. To get the value of a script element, use the .html() method.

link: http://api.jquery.com/text/