jQuery UI Selectable unselecting Event

Last Updated : 14 Jan, 2022

jQuery UI consists of GUI widgets, visual effects, and themes implemented using the jQuery JavaScript library. jQuery UI is great for building UI interfaces for the webpages. It can be used to build highly interactive web applications or can be used to add widgets easily.

The jQuery UI Selectable unselecting event is used to trigger during the select operation, on each element removed from the selection.

Syntax:

Initialize the Selectable widget with the unselecting callback function.

$( ".selector" ).selectable({
   unselecting: function( event, ui ) {}
});

Bind an event listener to the selectable unselecting event.

$( ".selector" ).on(  
   "selectableunselecting",  
   function( event, ui ) {}  
);

Parameters: This method accepts the following parameters

event: This event is triggered when selecting the items.
ui: This parameter is a jQuery object that is used for the current selectable item that is being selected.
- unselecting: This parameter is of the element type and it is the current item that is being selected.

CDN Link: Add the following jQuery Mobile scripts which will be needed for your project.

<link rel=”stylesheet” href=”https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

Example: This example describes the uses of the jQuery Mobile Selectable unselecting event.

HTML

<!doctype html> 
<html lang="en"> 
    
<head> 
    <link rel="stylesheet" href= 
"https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
    <script src= 
"https://code.jquery.com/jquery-1.12.4.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/ui/1.12.1/jquery-ui.js"> 
    </script> 
    <style> 
        h1 { 
            color: green; 
        } 
        #list .ui-selecting { 
            background:greenyellow; 
        } 
        #list .ui-selected { 
            color: white; 
            background: green; 
        } 
    </style> 
</head> 
    
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <h3>jQuery UI Selectable unselecting Event</h3> 
        <h3>GeeksforGeeks Subjects</h3> 
        <ul id="list" style="list-style: none"> 
            <li>Data Structure</li> 
            <li>Algorithm</li> 
            <li>C++</li> 
            <li>Java</li> 
            <li>HTML</li> 
            <li>Bootstrap</li> 
            <li>PHP</li> 
        </ul> 
        
        <div class="res"></div> 
        
        <script> 
            $(document).ready(function () { 
                $("#list").selectable(); 
        
                $("#list").selectable({ 
                    unselecting: function(event, ui) { 
                        $(".res").html("Unselecting Event Triggered"); 
                    }, 
                }); 
            }); 
        </script> 
    </center> 
</body> 
    
</html>