[jQuery] Cannot Modify Dynamic Content
Basically, I'm trying to create a Form using jQuery. The user selects
what kind of field to add and it adds the fields needed, dynamically
giving each new field a new name/class by changing each field
attribute from _q1 to _q2, etc.
Here is the basics of my script:
<script type="text/javascript">
var q = 0;
function nameup(rep, cnt){
var output = rep;
output = output.replace(/Question #1/g, "Question #"+cnt);
output = output.replace(/_q1/g, "_q"+cnt);
return output;
}
$(document).ready(function() {
$(".remove").click(function(){
q = q-1;
var kill = $(this).attr("id");
alert('ID='+kill);
return false;
});
var addtext = $('#add_text').html();
$('#add_text').remove();
$("#newtext").click(function(){
q = q+1;
$('#theqs').append(nameup(addtext, q));
return false;
});
});
</script>
------------------------------------
And here is the HTML:
<div id="theqs"></div>
<input type="button" id="newtext" value="Add Text Field" />
<div id="add_text"><div class="text_q1">
<strong>Text</strong>
<a class="remove" href="">REMOVE</a>
<input type="hidden" name="qt[]" /><label><strong>Question #1</
strong>: <input type="text" name="fieldquestion_q1" /></label>
<label><input type="checkbox" name="fieldrequired_q1"
value="required" />Required</label><br />
<label>Help Text: <input type="text" name="fieldhelp_q1" /></
label><br />
</div></div>
---------------------------------------
The "Add Text Field" button works great, but I cannot access the
REMOVE links via jQuery. I have it set to alert the ID of the REMOVE
link, but it does nothing - though it works with hardcoded REMOVE
links. It's like the appended HTML is not available to the DOM at
all. What do I need to do to be able to manupulate this dynamically
created HTML?