javascript - 为什么使用 jQuery 每次单击两次后添加 after() 文本？

Question

当我单击特定问题添加答案按钮时，我有几个问题。显示按钮后，我单击按钮以根据我已经使用 jQuery after() 单击的问题获取答案，如下所示:-

它可以工作，但不正常

当我点击第一个问题而不是点击按钮时，它给出一个答案，没关系

但是当我单击第二个问题时，单击按钮会给出两次答案，这是不行的

我只想为每个问题提供一个答案，我该怎么做？

$(function(){
  $('button').hide();
  $('.questions').click(function(){
    $('button').show();
    var $QuestionClick = $(this);

  $('button').click(function(){
    $QuestionClick.after('<p>This is text</p>')
  });
  
  });
});

.questions{ background:#f1f1f1; border:#ccc; padding:10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Add Answer</button>


<p class="questions">Question 1</p>
<p class="questions">Question 2</p>

回答将不胜感激!

Answer 1

您的路径是正确的，您只需将按钮单击功能从其他单击功能中移出即可。

$(function() {
  $('button').hide();
  var $QuestionClick
  $('.questions').click(function() {
    $('button').show();
    $QuestionClick = $(this);
  });
  $('button').click(function() {
    $QuestionClick.after('<p>This is text</p>')
  });
});

演示

$(function() {
  $('button').hide();
  var $QuestionClick
  $('.questions').click(function() {
    $('button').show();
    $QuestionClick = $(this);
  });
  $('button').click(function() {
    $QuestionClick.after('<p>This is text</p>')
  });
});

.questions {
  background: #f1f1f1;
  border: #ccc;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Add Answer</button>


<p class="questions">Question 1</p>
<p class="questions">Question 2</p>