when DOM changed event JavaScript

Question

My question is: "How to alert when move of <li> is done?"

this is sample from http://jqueryui.com/sortable/ i need to catch event after we change position of each <li> wich is inside <ul id="sortable" > tag. Maby the correct ansver is here https://en.wikipedia.org/wiki/DOM_events#Common.2FW3C_events but it's shows alert every time when i click. How to change code to see alert after DOM changed? I mean when we change position of <li> in relation to each other.

 <!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8">          
         <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
         <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
         <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

         <style>
             #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
             #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
             #sortable li span { position: absolute; margin-left: -1.3em; }
         </style>
         <script>
             $(function() {
                 $( "#sortable" ).sortable();
                 $( "#sortable" ).disableSelection();
             });
         </script>
     </head>
     <body >         
         <ul id="sortable" >
             <li class="ui-state-default">
                 <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1
             </li>
             <li class="ui-state-default">
                 <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2
             </li>
             <li class="ui-state-default">
                  <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3
             </li>
             <li class="ui-state-default">
                 <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4
             </li>
             <li class="ui-state-default">
                 <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5
             </li>
             <li  class="ui-state-default">
                 <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6
             </li>
             <li  class="ui-state-default">
                 <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7
             </li>
         </ul>
         <script>        
             $(document).ready(function(){
                 //Subscribe to domChanged event
                 $("#sortable").bind('DOMNodeInserted', function(){
                     alert('Dom changed');
                 });
                 //Trigger the domChanged event
                 $(document).trigger('DOMNodeInserted');
             });        
         </script>
     </body>
 </html>

score 0 · Answer 1 · answered Oct 28 '15 at 11:52

0

Try this:

$( "#sortable" ).sortable({
  change:  function (event, ui) {
      alert("Changed");
  }
});

answered Oct 28 '15 at 11:52

Deepak Biswal

4,280
2
20
37

when DOM changed event JavaScript

1 Answers1