<分区>
javascript - AppendTo 然后可能删除该元素
标签 javascript jquery html css
我有一些元素可以移动到另一个 div(从 x 到 y)。问题是 x 中的元素是可删除的，但新复制的元素不是。
这是第一个状态
这里是删除Filter 1后的状态
这是在上面添加 Name person 之后的状态...但是我不能像其他元素一样删除它!
我已经检查了类 css，它们看起来还不错。
这是我的代码。
JS
function AddFilters()
{
if ( $(".filter-edited").css('display') == 'none' )
{
$("#btn_add").html("Hide Filters");
// element is hidden
$(".filter-edited").fadeIn();
}
else if ( $(".filter-edited").css('display') != 'none' )
{
$("#btn_add").html("Add Filter");
// element is hidden
$(".filter-edited").hide();
}
}
$(document).ready(function() {
$('.removable').on('click', function() {
$(this).parent().remove();
});
});
$(document).ready(function() {
$('.addable').on('click', function() {
$(this).parent().appendTo(".filter-added");
$(this).attr('class', 'glyphicon glyphicon-remove pull-right removable');
});
});
HTML
<script src="../assets/own_js/addfilters.js"></script>
<div class="row add-filters">
<div class="col-md-12">
<div class="row ">
<div class="col-sm-10 filter-added">
<span> Filtered on: </span>
<a class="btn btn-default">
<span class="text">Filter 1</span>
<span class="glyphicon glyphicon-remove pull-right removable" ></span>
</a>
<a class="btn btn-default">
<span class="text">Filter 2</span>
<span class="glyphicon glyphicon-remove pull-right removable"></span>
</a>
<a class="btn btn-default">
<span class="text">Filter 3</span>
<span class="glyphicon glyphicon-remove pull-right removable" ></span>
</a>
</div>
<div class="col-sm-2 pull-right">
<a class="btn btn-default" id="btn_add" onclick="AddFilters()">Add filter</a>
</div>
</div>
<div class="row filter-edited" style="display:none;">
<div class="col-md-12">
<div class="row">
<div class="col-md-10 filters">
<a class="btn btn-default">
<span class="text">Business</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class="text">Campaign</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class"text">Event</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class"text">Channel</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
<a class="btn btn-default">
<span class"text">Name person</span>
<span class="glyphicon glyphicon-plus pull-right addable"></span>
</a>
</div>
<div class="col-md-2">
</div>
</div>
<div class="row">
</div>
</div>
</div>
</div>
</div>
SASS
.add-filters
{
.filter-added
{
span
{
margin-right: 5px;
}
span.glyphicon.glyphicon-remove
{
margin-left: 8px;
color: red;
&:hover
{
cursor: pointer;
color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}
}
a.btn.btn-default
{
min-width:100px;
padding: 3px 0px 0px 0px;
margin-left: 10px;
//delete the margin between the buttons on small devices
@media (max-width: 768px) {
margin-left: 0px;
}
&:first-of-type
{
margin-left: 0px;
}
&:hover
{
cursor:default;
background-color: #fff;
border-color: #ccc;
}
}
}
.filter-edited
{
margin-top: 20px;
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 7px;
/* Firefox 1-3.6 */
-moz-border-radius: 7px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 7px;
border: 1px solid #ddd;
span.glyphicon.glyphicon-plus
{
margin-left: 4px;
color: #15925f;
}
a.btn.btn-default
{
min-width:150px;
padding: 10px 5px 10px 0px;
margin-left: 5px;
//delete the margin between the buttons on small devices
@media (max-width: 768px) {
margin-left: 0px;
margin-top: 2px;
}
&:first-of-type
{
margin-left: 0px;
}
}
.filters {
padding: 15px;
}
}
}
最佳答案
您只监听当前显示元素上的事件。您需要在父元素上调用 .on() 函数并将子选择器作为第二个参数传递。
$(document).ready(function() {
$('.filter-added').on('click', '.removable', function() {
$(this).parent().remove();
});
});
关于javascript - AppendTo 然后可能删除该元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32718559/