将项目符号添加到多个文本区域和隐藏的文本区域

Question

我正在尝试向多个文本区域添加项目符号。当文本区域未隐藏时，这很好用，但是我希望能够将项目符号添加到新创建的文本区域（单击按钮 "Add New"。理想情况下，我还希望新创建的项目符号转到下一个行而不是并排显示。

$(document).ready() 
$('.add-bullet').click(function() {
    $(this).parent().next('textarea').val(function(idx, value){
        return value + '\u2022';
    });
    return false;
});

(function($) {
  "use strict";
  
  var itemTemplate = $('.workExperience-template').detach(),
      editArea = $('.workExperience-area'),
      itemNumber = 1;
  
  $(document).on('click', '.workExperience-area .add', function(event) {
    var item = itemTemplate.clone();
    item.find('[name]').attr('name', function() {
      return $(this).attr('name') + '_' + itemNumber;
    });
    ++itemNumber;
    item.prependTo(editArea);
  });
  
  $(document).on('click', '.workExperience-area .rem', function(event) {
    editArea.children('.workExperience-template').last().remove();
  });
  
  $(document).on('click', '.workExperience-area .del', function(event) {
    var target = $(event.target),
        row = target.closest('.workExperience-template');
    row.remove();
  });
}(jQuery));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textarea">
 <div><a href="#" class = "add-bullet">Add bullet</a></div>
    <textarea id="todolist" class="todolist" name="todolist" placeholder="Write something.." ></textarea>
    </div>
 
    <div class="hidden">
    <div class="workExperience-template">
    <div class="textarea">
    <div><a href="#" class = "add-bullet">Add bullet</a></div>
    <textarea id="list" class="list" name="tata" placeholder="Write something.." ></textarea>
    </div>
        </div>
    </div>
    
    <div class="workExperience-area">
    <button type="button" class="add buttonBlueAddField">Add New</button>
    </div>

Answer 1

您应该在新创建的 anchor 上附加点击事件：

$(document).ready() 
$('.add-bullet').click(function() {
    $(this).parent().next('textarea').val(function(idx, value){
        return value + '\u2022';
    });
    return false;
});

(function($) {
  "use strict";
  
  var itemTemplate = $('.workExperience-template').detach(),
      editArea = $('.workExperience-area'),
      itemNumber = 1;
  
  $(document).on('click', '.workExperience-area .add', function(event) {
    var item = itemTemplate.clone();
    item.find('[name]').attr('name', function() {
      return $(this).attr('name') + '_' + itemNumber;
    });
    ++itemNumber;
    
    item.find(".add-bullet").click(function() {
    $(this).parent().next('textarea').val(function(idx, value){
        return value + '\u2022\n';
    });
    return false;
});
  $(".textarea").next().append(item);
  });
  
  $(document).on('click', '.workExperience-area .rem', function(event) {
    editArea.children('.workExperience-template').last().remove();
  });
  
  $(document).on('click', '.workExperience-area .del', function(event) {
    var target = $(event.target),
        row = target.closest('.workExperience-template');
    row.remove();
  });
}(jQuery));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textarea">
 <div><a href="#" class = "add-bullet">Add bullet</a></div>
    <textarea id="todolist" class="todolist" name="todolist" placeholder="Write something.." ></textarea>
    </div>
 
    <div class="hidden">
    <div class="workExperience-template">
    <div class="textarea">
    <div><a href="#" class = "add-bullet">Add bullet</a></div>
    <textarea id="list" class="list" name="tata" placeholder="Write something.." ></textarea>
    </div>
        </div>
    </div>
    
    <div class="workExperience-area">
    <button type="button" class="add buttonBlueAddField">Add New</button>
    </div>

将项目符号添加到多个文本区域和隐藏的文本区域

Add bullet to multiple textarea and hidden textareas

html

javascript

jquery

textarea