Javascript 不识别点击事件

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() 中的第二个参数来使用事件委托(delegate)调用，请参见下面的示例:

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

来自 jQuery on()方法文档:

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

请参阅 jQuery 中的“直接和委托(delegate)事件”on()方法文档和 jQuery DataTables – Why click event handler does not work获取更多信息。

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