[英]jQuery Field Not Being Removed After Appending it
I am running into an issue where I can't seem to get my jQuery script to remove fields after they have been added. 我遇到了一个问题,我似乎无法让我的jQuery脚本在添加后删除字段。 I have tried a few changes, but nothing has worked.
我尝试了一些改变,但没有任何效果。
$(function() { var dataSourceField = $('#sign-up-organization-discovery-source'); var i = $('#sign-up-organization-discovery-source p').size() + 1; $('#sign-up-add-discovery-source').on('click', function() { $('<p><label for="discovery-source-field"><input type="text" id="discovery-source-field" size="20" name="discoverySource" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(dataSourceField); i++; return false; }); $('#remScnt').on('click', function() { if (i > 2) { $(this).parents('p').remove(); i--; } return false; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="col-md-6 col-md-offset-3"> <form action="/app/sign-up/organization" method="post"> <p>{{user.email}}</p> <input type="hidden" name="admin" value="{{user.email}}"> <input type="hidden" name="organizationId"> <label for="sign-up-organization">Company/Organization Name</label> <input type="text" class="form-control" id="sign-up-organization" name="organizationName" value="" placeholder="Company/Organization"> <a href="#" id="sign-up-add-discovery-source">Add Another Discovery Source</a> <div id="sign-up-organization-discovery-source"> <input type="text" id="discovery-source-field" placeholder="Discovery Source" name="discoverySource"> </div> <br /> <button type="submit">Submit</button> </form> <a href="/login">Already have an account? Login here!</a> </div> </div>
There are a couple problems here. 这里有几个问题。
Firstly, an id
is suppose to be unique! 首先,
id
被认为是唯一的! You are duplicating id
attribute values each time you append the element. 每次附加元素时都会复制
id
属性值。
Secondly, even if you were to use a class rather than an id
, it still wouldn't work as expected because the clickable/removable a
element doesn't exist in the DOM when you are attaching the event listeners. 其次,即使你使用一个类,而不是一个
id
,它仍然不会如预期,因为点击/移动工作a
,当你连接的事件监听器元素没有在DOM存在。
You would either need to attach the event after appending the element, or you could use event delegation and attach the event to a common parent element that exists at the time. 您可能需要在附加元素后附加事件,或者您可以使用事件委派并将事件附加到当时存在的公共父元素。
$('#sign-up-organization-discovery-source').on('click', '.remove', function() {
// ...
});
<a href="#" id="remScnt">Remove</a>
to: <a href="#" class="remove">Remove</a>
. <a href="#" id="remScnt">Remove</a>
更改为: <a href="#" class="remove">Remove</a>
。 click
event to the #sign-up-organization-discovery-source
element. click
事件委托给#sign-up-organization-discovery-source
元素。 $('##sign-up-organization-discovery-source').on('click', '#remScnt', function() {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
return false;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.