Question

目前我有一个页面，其中有3个面板，我可以拖放。在这些面板上，我有3个字形，一个用于缩放，一个用于删除，一个用于编辑。以删除字形为例，当我点击它时，它应删除页面中的整个部分。如果我不拖放要删除的面板，则此方法有效。然而，一旦我将其拖到新位置，我的javascript似乎不再识别字形/点击事件。

这是我的删除JavaScript代码。

$(document).ready(function(){
    $(".glyphicon.glyphicon-trash").click(function (event) {
        event.preventDefault();
        $(this).closest(".col-md-4").remove();
    });
});

这是我拖放后试图删除的面板的HTML。

<div class="row" id="columns">
<div class="col-md-4 column">
    <div class="panel panel-default" draggable="true">
        <div class="panel-heading">
            <h3 class="panel-title">Panel title
                <span class="glyphicon glyphicon-pencil panel-icons"></span>
                <span class="glyphicon glyphicon-zoom-in panel-icons"></span>
                <span class="glyphicon glyphicon-trash panel-icons"></span>
            </h3>
        </div>
        <div class="panel-body" id="testchart">
            <!--CHART GOES HERE-->
        </div>
    </div>
</div>
<div class="col-md-4 column">
    <div class="panel panel-default" draggable="true">
        <div class="panel-heading panel-backcolour">
            <h3 class="panel-title">
                Panel title
                <span class="glyphicon glyphicon-pencil panel-icons"></span>
                <span class="glyphicon glyphicon-zoom-in panel-icons" data-toggle="modal" data-target="#myModal"></span>
                <span class="glyphicon glyphicon-trash panel-icons"></span>
            </h3>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
</div>
<div class="col-md-4 column">
    <div class="panel panel-default" draggable="true">
        <div class="panel-heading">
            <h3 class="panel-title">Panel title
                <span class="glyphicon glyphicon-pencil panel-icons"></span>
                <span class="glyphicon glyphicon-zoom-in panel-icons"></span>
                <span class="glyphicon glyphicon-trash panel-icons"></span>
            </h3>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
</div>

此处还有我的用于拖放的js代码

    //For reference tutorial can be found here http://www.html5rocks.com/en/tutorials/dnd/basics/

var dragSrcEl = null;

function handleDragStart(e) {
    // Target (this) element is the source node.
    this.style.opacity = "1.0";

    dragSrcEl = this;

    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/html", this.innerHTML);
}

function handleDragOver(e) {
    if (e.preventDefault) {
        e.preventDefault(); // Necessary. Allows us to drop.
    }

    e.dataTransfer.dropEffect = "move";  // See the section on the DataTransfer object.

    return false;
}

function handleDragEnter(e) {
    // this / e.target is the current hover target.
    e.target.classList.add("over");
}

function handleDragLeave(e) {
    e.target.classList.remove("over");  // this / e.target is previous target element.
}

function handleDrop(e) {
    // this/e.target is current target element.

    if (e.stopPropagation) {
        e.stopPropagation(); // Stops some browsers from redirecting.
    }

    // Don't do anything if dropping the same column we're dragging.
    if (dragSrcEl != this) {
        // Set the source column's HTML to the HTML of the column we dropped on.
        dragSrcEl.innerHTML = this.innerHTML;
        this.innerHTML = e.dataTransfer.getData("text/html");
    }

    return false;
}

function handleDragEnd(e) {
    // this/e.target is the source node.

    [].forEach.call(columns, function (column) {
        column.classList.remove("over");
    });
}

var columns = document.querySelectorAll(".panel");

[].forEach.call(columns, function (column) {
    column.addEventListener("dragstart", handleDragStart, false);
    column.addEventListener("dragenter", handleDragEnter, false)
    column.addEventListener("dragover", handleDragOver, false);
    column.addEventListener("dragleave", handleDragLeave, false);
    column.addEventListener("drop", handleDrop, false);
    column.addEventListener("dragend", handleDragEnd, false);
});

Answer 1

您需要通过在on()调用中提供选择器作为第二个参数来使用事件委派，请参阅下面的示例：

$(document).ready(function(){
    $('#columns').on('click', '.glyphicon.glyphicon-trash', function (event) {
        event.preventDefault();
        $(this).closest(".col-md-4").remove();
    });
});

来自jQuery on()方法文档：

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。

有关详细信息，请参阅jQuery on()方法文档中的“直接和委派事件”和jQuery DataTables – Why click event handler does not work。

在旁注中，请参阅suggestion from ImreNage有关删除.col-md-4而不是.panel的信息。

Answer 2

据我所知，你似乎拖了这个元素：

<div class="panel panel-default" draggable="true">

其中的父母：

<div class="col-md-4 column">

然后查找父删除它：

$(this).closest(".col-md-4").remove();

哪个不存在了。尝试将整个容器移动为一个或删除下面的一个级别：

$(this).closest(".panel").remove();

Javascript无法识别点击事件

2 个答案: