单击jquery创建的元素时出现问题

我有以下html：

div id="parentanswer">    
<div id="parent0" class="control-group" style="margin: 0;">
<label class="control-label">Answer</label>
<div id="answer0" class="controls">
<input type="text" class="span6 m-wrap" />  
<select name="answerCountry" id="answercountry0" class="select2"><option value="DA">Danmark</option><option value="EN">Engelsk</option><option value="GE">Tysk</option><option value="SE">Svensk</option></select>
Right answer<input type="checkbox" value="" />
</div>
<p style="padding: 0; margin: 0; padding-left: 180px;"><a href id="translateanswer0" answertranslateid="0">Translate answer</a></p>  
</div>  
</div>
<p style="padding: 0; margin: 0; padding-left: 180px;"><a href id="addanswer">Add new answer</a></p> 

div id=“parentanswer”>
答复
丹麦恩格尔斯克钦斯克
正确答案

以及以下jquery：

$("[id^=translateanswer]").on("click", function () {
    alert($(this).attr('answertranslateid'));
    answerid = $(this).attr('answertranslateid');
    newtranslateid = '#answer' + answerid;
    answerselectid = 'answerCountry' + answerid;
    alert(newtranslateid);
    $("<div style=\"padding: 0; margin: 0;\" class=\"controls\"><input type=\"text\"     class=\"span6 m-wrap\" />  <select name=\"answerCountry\" id=\"" + answerselectid + "\"     class=\"select2\"><option value=\"DA\">Danmark</option><option value=\"EN\">Engelsk</option>    <option value=\"GE\">Tysk</option><option value=\"SE\">Svensk</option></select>    </div>").appendTo(newtranslateid);
    return false;
});

$('#addanswer').on("click", function () {
    counter++;
    newtranslateid = counter;
    alert(newtranslateid);
    newquestionid = 'answer' + counter;
    newtranslateanswerid = 'translateanswer' + counter;
    answerselectid = 'answercountry' + counter;
    newparentid = 'parent' + counter;
    $("<div id=\"" + newparentid + "\" class=\"control-group\" style=\"margin: 0;\"><label class=\"control-label\">Answer</label><div id=\"" + newquestionid + "\" class=\"controls\"><input type=\"text\" class=\"span6 m-wrap\" /><select name=\"answerCountry\" id=\"" + answerselectid + "\" class=\"select2\"><option value=\"DA\">Danmark</option><option value=\"EN\">Engelsk</option><option value=\"GE\">Tysk</option><option value=\"SE\">Svensk</option></select> Right answer<input type=\"checkbox\" value=\"1\" /></div><p style=\"padding: 0; margin: 0; padding-left: 180px;\"><a href id=\"" + newtranslateanswerid + "\" answertranslateid=\"" + newtranslateid + "\">Translate answer</a></p> </div>").appendTo('#parentanswer');
    return false;
});

$（“[id^=translateanswer]”）。在（“单击”，函数（）{
警报（$（this.attr（'answertranslateid'））；
answerid=$（this.attr（'answertranslateid'）；
newtranslateid=“#答案”+答案ID；
answerselectid='answerCountry'+answerid；
警报（新TranslateId）；
$（“DanmarkEngelsk-TyskSvensk”）。附录（新翻译版）；
返回false；
});
$（'#addanswer'）。在（“单击”，函数（）{
计数器++；
newtranslateid=计数器；
警报（新TranslateId）；
newquestionid='答案'+计数器；
newtranslateanswerid='translateanswer'+计数器；
answerselectid='answercountry'+计数器；
newparentid='parent'+计数器；
$（“AnswerDanmarkEngelskTyskSvensk右答案
”）。附录（“#parentanswer”）；
返回false；
});

当我在html代码中单击“翻译答案”时，效果很好，并将正确的html附加到我的网站上，“添加新答案”也是如此

当我添加了一个新问题并想翻译它并单击“翻译答案”时，问题就会出现。 然后我的站点只需重新加载，而不调用$（“[id^=translateanswer]”）{

我尝试过“硬编码”一个应答器1，然后调用“翻译应答”，效果很好，我也尝试过清空翻译应答函数，只是发出警报，但它没有提醒消息。我怀疑失败在addanswer函数中，但我找不到它

我创建了一个，但它说了一些关于使用post的内容

---

更新的JSFIDLE:

若要对动态生成的元素使用事件处理程序，必须对共享父元素（不必是直接父元素）调用

.on（）

，并传递感兴趣的元素的选择器。例如：

<div id="parent">
  <a class="dynamic-element"></a>
  <a class="dynamic-element"></a>
  <!-- etc. -->
</div>
<script>
  $("#parent").on("click", ".dynamic-element", function() {
    // ...
    return false;
  });
</script>

您可能有：

$("#some-parent-element").on("click", "[id^=translateanswer]", function() {

---

要对动态生成的元素使用事件处理程序，必须对共享父元素（不必是直接父元素）调用

.on（）

，并传递感兴趣元素的选择器。例如：

<div id="parent">
  <a class="dynamic-element"></a>
  <a class="dynamic-element"></a>
  <!-- etc. -->
</div>
<script>
  $("#parent").on("click", ".dynamic-element", function() {
    // ...
    return false;
  });
</script>

您可能有：

$("#some-parent-element").on("click", "[id^=translateanswer]", function() {

---

它说请使用Post请求是因为您将JS库设置为JQueryTanks，修复了：）它说请使用Post请求是因为您将JS库设置为JQueryTanks，修复了：）我创建了一个新的JFIDLE（），并尝试实现上述功能，但它似乎不起作用？有一个未定义的变量错误（计数器）在那把小提琴中。我在这里更新了它：。可能我误解了；当单击“翻译答案”和“添加新答案”时，预期的行为是什么？它工作得非常完美，当单击“翻译答案”时，它将创建一个新行“下”当前答案，当单击“添加新答案”时，它应该会创建一个新问题，该问题也应该能够翻译等等。非常感谢！我已经创建了一个新的jfiddle（），并尝试实现上述内容，但它似乎不起作用？有一个未定义的变量错误（计数器）在那把小提琴里。我在这里更新了它：。可能我误解了；当点击“翻译答案”和“添加新答案”时，预期的行为是什么？它工作得非常完美，当点击“翻译答案”时，它将创建一个新行“下”当前答案，单击“添加新答案”时，应创建一个新问题，该问题还应能够翻译，等等。非常感谢！