Level 102
That looks fine, but I would add prevent default to the click event so the a tag isn't treated like a link
$('#addRealPerson').click(function (e) {
e.preventDefault()
Sep 24, 2022
7
Level 1
jquery add dynamic html to div
I'm not sure if this would be the best option. But I want the option that when the user clicks a button, it will add another div.
HTML
<p>
<a class="btn btn-lg btn-secondary me-2" id="addRealPerson">Real Person</a>
</p>
JS
<script>
jQuery(function() {
$(document).ready(function(){
let count = 1;
$('#addRealPerson').click(function () {
count++;
addRealPerson(count);
});
function addRealPerson(number) {
let html = ''+
'<div class="col-lg-6 mb-3">\n'+
'<fieldset class="border p-2">\n'+
'<legend class="float-none w-auto p-2 h6 fs-6">Real Person</legend>\n'+
'<textarea name="real_person" id="real_person" class="form-control border-0" rows="10" aria-label="real_person"></textarea>\n'+
'</fieldset>\n'+
'</div>';
$('#showRealPerson').append(html);
}
});
});
</script>
Level 1
I added your code to my codes, but it did not work
$('#addRealPerson').click(function (e) {
e.preventDefault();
count++;
addRealPerson(count);
});
Level 102
@recyclebin ok? So what happened? The browser crashed? An error?
Level 1
@Sinnbeck I don't see any error in the browser at all.
Level 102
@recyclebin and you have an element with id="showRealPerson"?
Level 1
@Sinnbeck YES
Level 102
@recyclebin It should work? Tested it out: https://jsfiddle.net/xauc5nof/
1 like
Please or to participate in this conversation.