Dynamically created DOM manipulation button doesn't fire event
I have a function to add and remove a field, but the remove function is not working somehow.
HTML:
<div id="parts">
Part
<input type="text" id="auto_part" name="auto_part" />
<br />
Description
<input type="text" id="auto_description" name="auto_description" />
<br />
</div>
<a href="#" id="addField">Add another part</a>
JQuery
$(function() {
var scntDiv = $('#parts');
var i = $('#parts input').size();
$('#addField').on('click', function() {
$('<br /><div id="parts"><span>Part</span> <input type="text" id="auto_part'+i+'" name="auto_part'+i+'" /><br />').appendTo(scntDiv);
$('<span>Description</span> <input type="text" id="auto_description'+i+'" name="auto_description'+i+'" /> <br />').appendTo(scntDiv);
$('<input type="hidden" id="row_count" name="row_count" value="" />').appendTo(scntDiv);
$('<a href="#" id="removefield">Remove</a></div>').appendTo(scntDiv);
i++;
return false;
});
$('#removefield').on('click', function() {
if( i > 2 ) {
$(this).parents('div').remove();
i--;
}
return false;
});
});
The problem must be related to this line:
$('#removefield').on('click', function() {
He does not convey this condition. When I click Delete, it doesn't do anything, it just scrolls up.
source to share
You bind a handler click
to elements that are present in the DOM. But your element is #removefield
dynamically added. So the event handler is not attached to it.
You can use .on()
to leverage delegate and handle future items as well. Also, you can use class names instead of attributes id
. id
the attributes must be unique, but you can set the class name to as many elements as you like.
<a href="#" class="removefield">Remove</a>
$("#parts").on("click", ".removefield", function() {
/* ... */
});
The reason your link is "Remove"
not working is because you are adding the dynamic element piece <div>
by piece, which makes it invalid markup. You have to add everything together at the same time. For example,
$('#addField').on('click', function () {
var part = '<div id="parts' + i + '"><span>Part</span> <input type="text" id="auto_part' + i + '" name="auto_part' + i + '" /><br/>' +
'<span>Description</span> <input type="text" id="auto_description' + i + '" name="auto_description' + i + '" /> <br />' +
'<input type="hidden" id="row_count' + i + '" name="row_count' + i + '" value="" />' +
'<a href="#" class="removefield' + i + '">Remove</a></div>';
scntDiv.after(part);
i++;
return false;
});
$(document).on("click", ".removefield", function() {
if( i > 2 ) {
$(this).parent('div').remove();
i--;
}
return false;
});
source to share