Problems when clicking on jquery created elements

Question

I have the following 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> 

And the following 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;
});

When i click "Translate answer" in the html code, it works out well, and appends the correct html to my site, the same goes for "Add new answer".

The problem occurs when I have added a new question and would like to translate it and clicks "Translate answer". Then my site just reloads, without calling the $("[id^=translateanswer]").on("click", function(){

I've tried "hardcoding" an answer1 and then calling "Translate answer", which works out well, I also tried emptying the translate answer function, to just make an alert, but it didn't alert the message. I suspect the failure is in the addanswer function but I can't find it.

I created a jsfiddle, but it said something about using post instead?

Updated jsfiddle: http://jsfiddle.net/4cTBP/

Answer 1

To use event handlers with dynamically generated elements, you must call .on() on a shared parent element (does not have to be the immediate parent) and pass the selector of the elements you are interested in. For example:

<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>

In the context of your question, instead of:

$("[id^=translateanswer]").on("click", function () {

You might have:

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