Question

我有一些元素可以移动到另一个div（从x到y）。问题是x中的元素是可删除的，但新复制的元素不是。

这是第一个州

这里是删除过滤器1后的状态

这里是添加姓名人员之后的状态...但我不能像其他人一样删除它！

我已经检查了类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 CSS

 .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;

        }
    }
 }

Answer 1

您正在侦听当前显示的元素上的事件。您需要在父元素上调用.on（）函数并将子选择器作为第二个参数传递。

$(document).ready(function() {
    $('.filter-added').on('click', '.removable', function() {
        $(this).parent().remove();
    });
});

Answer 2

  $('.removable').on('click', function() {
      $(this).parent().remove();
  });

应该是：

  $(document).on('click', '.removable', function() {
      $(this).parent().remove();
  });

这背后的原因是，您只是将此事件应用于页面上的当前元素。下面的标记将其应用于文档中存在的“.removable”的所有元素。当前和未来。

你也可以在创建对象后对它运行一个.bind（），然后将一个事件绑定到它，但这样会占用更多的代码并且效率会降低。

AppendTo然后可能删除该元素

2 个答案: