[英]Dynamically created DOM manipulation button not firing event
I have a function to add and remove a field but the remove function doesnt work somehow. 我有一个添加和删除字段的功能,但删除功能无论如何都不起作用。
HTML: 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: 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 have to do with this line: 问题必须与此行有关:
$('#removefield').on('click', function() {
It doesnt pass that condition. 它没有通过这个条件。 When I click on Remove it doesnt do anything at all it just scrolls to the top. 当我点击删除它没有做任何事情它只是滚动到顶部。
You are binding the click
handler to the elements that are present in the DOM. 您将click
处理程序绑定到DOM中存在的元素。 But, your #removefield
element is being dynamically added. 但是,您的#removefield
元素正在动态添加。 So, the event handler is not attached to it. 因此,事件处理程序未附加到它。
You can use .on()
to use event delegation and handle also future elements. 您可以使用.on()
来使用事件委托并处理将来的元素。 Also, you may want to use classnames instead of and id
attributes. 此外,您可能希望使用类名而不是id
属性。 id
attributes need to be unique, but you can set the classname to as many elements as you want. id
属性必须是唯一的,但您可以将类名设置为任意数量的元素。
<a href="#" class="removefield">Remove</a>
$("#parts").on("click", ".removefield", function() {
/* ... */
});
The reason why your "Remove"
link doesn't work is because you are adding the dynamic <div>
element by parts hence making it invalid markup. "Remove"
链接不起作用的原因是因为您<div>
部件添加动态<div>
元素,从而使其无效标记。 You should be adding it all together at once. 你应该立刻将它们全部加在一起。 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;
});
尝试
$('#removefield').live("click", function() {
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.