CODEWITHSUNDEEP
jquerycssjquery-uiaddclassremoveclass
Jacinth Suico
Jacinth Suico

Reputation: 11

.addClass and remove existing

I have this jQuery: 

$(".com-bg-td").each(function (index) {
    $(this).droppable({
        accept: ".avail_pc_list",
        hoverClass: "cell-highlght",
        tolerance: "pointer",
        drop: function (event, ui) {
            var droppableId = $(this).attr("id");
            var dragged = $(ui.draggable).attr("id");
            dropped(droppableId, dragged);
            $(this).removeClass("com-bg-td").addClass("cell-dropped");
        }
    });
});

The jQuery is for dragging an element which are .avail_pc_list but after the function dropped() I expect that it won't accept the .avail_pc_list anymore since I remove it. But still it was accepted.

Upvotes: 1

Views: 191

Answers (1)

Mike Brant
Mike Brant

Reputation: 71384

This is because once the DOM element is assigned as droppable, you are doing nothing you make it undroppable. Just changing class won't work as this has nothing to do with droppability, it just happened to be you initial selector handle for modifying the element.

You need to modify your code to this: 

$(this).droppable('destroy').removeClass("com-bg-td").addClass("cell-dropped");

Note you could also use droppable('disable') instead of destroy if you think you may want to enable the functionality again at some point with droppable('enable').

This is a good general lesson in jQuery as well. The selector is really just a means to query a DOM for elements you want to work with. You make modifications such as applying droppable to the DOM element itself. This functionality will persist until you do something to remove it. This could just as easily be true with adding an onclick handler like this:

$('.someClass').click(function() { ... });
$('.someClass').addClass('someOtherClass').removeClass('someClass');
$('.someOtherClass').click(); // will trigger click handler bound to these elements when they were classed as someClass even though they no longer have that class.

This is of course would not be the case if using delegated events (like for example using on()).

$('#someContainer').on('click', '.someClass' function() { ... });
$('.someClass').addClass('someOtherClass').removeClass('someClass');
$('.someOtherClass').click(); // would not trigger click function since the binding was actually made against #someContainer and the someClass has been removed everywhere

Upvotes: 2

Related Questions