jQuery click（）和append（）在迭代的div上没有响应

Question

我正在迭代这个div和脚本，以便用户可以添加三个默认选项（question-editor-answer-container）的答案。但点击“添加答案”不起作用，我不明白为什么。

我有一个单独的工作，但麻烦开始时，我不得不调整在同一页面上有很多div。其他容器（popup.question-editor）有不同的id，如13,14,15等。这些是通过php放置的，这可能不相关。

var container = $(".popup.question-editor#12");
container.find(".add-answer").click(function() {
  var order = null;
  order = container.find('.question-editor-answers div:last-child .correct').attr('value');
  order = parseInt(order) + 1;
  container.find('.question-editor-answers').append($('<div class="question-editor-answer-container"><span class="question-answer"><input type=text name="answers[]" /></span><span class="question-correct"><input type="radio" class="correct" value="' + order + '"name="correct"  /></span></div>'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup question-editor" id="12">
  <span class="close" id="close">X</span>
  <form method="post" lpformnum="4">
    <p>
      <label>Question</label>
      <textarea name="question" class="question-input"></textarea>
    </p>
    <p>
      <label>Answers</label>
    </p>
    <div class="question-editor-answers">
      <div class="question-editor-answer-container">
        <span class="question-answer">
						<input type="text" name="answers[]">
					</span>
        <span class="question-correct">
						<input type="radio" class="correct" name="correct" value="0">
					</span>
      </div>
      <div class="question-editor-answer-container">
        <span class="question-answer">
						<input type="text" name="answers[]">
					</span>
        <span class="question-correct">
						<input type="radio" class="correct" name="correct" value="1">
					</span>
      </div>
      <div class="question-editor-answer-container" id="found">
        <span class="question-answer">
						<input type="text" name="answers[]">
					</span>
        <span class="question-correct">
						<input type="radio" class="correct" name="correct" value="2">
					</span>
      </div>
      <div>Something</div>
    </div>
    <div class="add-answer" id="add-answer"><span>add</span></div>
    <p></p>
    <p>
      <input type="checkbox" name="reuse" value="1">Allow reuse (what does this mean?)
    </p>
    <p>
      <input type="hidden" name="add_question" value="add">
      <input type="hidden" name="category" value="1">
      <input type="submit" value="Add">
    </p>
  </form>
</div>