Javascript not identifying click event

Question

Currently I have a page where there are 3 panels I can drag and drop. On these panels I have 3 glyphs one for zooming, one for deleting and one for edit. Take for example the deletion glyph, when I click this it should remove the whole section within the page. This works if I do not drag and drop the panel that I want to delete. However once I drag it over to a new position, my javascript does not seem to recognize the glyph/click event anymore.

Here is my javascript code for deleting.

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

and here is the HTML for the panels I am attempting to delete after I drag and drop.



    
        
            Panel title
                
                
                
            
        
        
            
        
    


    
        
            
                Panel title
                
                
                
            
        
        
            Panel content
        
    


    
        
            Panel title
                
                
                
            
        
        
            Panel content

Also here is my js code for drag and dropping

    //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);
});

Gyrocode.com · Accepted Answer

You need to use event delegation by providing selector as a second argument in on() call, see example below:

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

From jQuery on() method documentation:

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

See "Direct and delegated events" in jQuery on() method documentation and jQuery DataTables – Why click event handler does not work for more information.

On a side note, see suggestion from ImreNage about removing .col-md-4 instead of .panel.

Javascript not identifying click event

Answers (2)

Related Questions