为什么每次使用 jQuery 在单击时添加两次 after() 文本?

Question

当我单击特定问题Add Answer按钮显示时，我有几个问题。显示按钮后，我单击按钮根据我已经使用如下所示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>