CODEWITHSUNDEEP
javascriptjqueryjquery-uidraggable
akifquddus
akifquddus

Reputation: 632

How to make an Element Clickable inside a Draggable Element?

I am working on a Drag & Drop Builder using JQuery UI. What I want to do is, when I hover on any Drag-able element, a cross appears, and on clicking that cross, that element needs to be removed. Here is my JQuery Code to create a Drag-able Element:

var postfix = '<i class="fa fa-times"></i>';
$(".buildbutton").click(function() {
    var id = this.id;
    if (id === 'label') {
        var elemHtml = '<div class="draggable"><label contenteditable="true" class="draggable" id="label' + labelCount + '">Text</label> ' + postfix + '</div>';
        $("#canvas").append(elemHtml);
        label++;
    }
    $(function() {
        $( ".draggable" ).draggable({containment: "#canvas"}).resizable();
    });
    return false;
});

JQuery Code to bind a Remove event:

$(".draggable").on("click", "i", function(){
     alert("going to remove this element");
});

But the Click event is not working as the drag-able element is triggering it's own event whenever I click on it.

How Can I make this Cross click-able.?

Upvotes: 2

Views: 1544

Answers (2)

akifquddus
akifquddus

Reputation: 632

This is the working code:

$(".draggable i.remove-elem").off('click').on("click", function(){
        $(this).parent('.draggable').remove();
});

Upvotes: 1

Anton Temchenko
Anton Temchenko

Reputation: 1499

you got the same issue as here : jQuery .on('click') does not work with jQuery UI draggable

This should work:

$(".draggable i").on("click", function(){
     alert("going to remove this element");
});

Here is a working jsFiddle

Upvotes: 0

Related Questions