当DOM更改事件JavaScript时_Javascript_Jquery

当DOM更改事件JavaScript时

javascript jquery

当DOM更改事件JavaScript时,javascript,jquery,Javascript,Jquery,我的问题是：“当移动完成时，如何发出警报？” 这是我们的样品我需要在我们更改每个标记的位置后捕获事件，该标记位于标记内。也许正确的答案在这里，但每次我点击时它都会显示警报。如何更改代码以在DOM更改后查看警报？我的意思是当我们改变相对于彼此的位置时 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> &

我的问题是：“当
移动完成时，如何发出警报？”

这是我们的样品我需要在我们更改每个

标记的位置后捕获事件，该标记位于

标记内。也许正确的答案在这里，但每次我点击时它都会显示警报。如何更改代码以在DOM更改后查看警报？我的意思是当我们改变

相对于彼此的位置时

 <!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>


#可排序{列表样式类型：无；边距：0；填充：0；宽度：60%；}
#可排序li{margin:0 3px 3px 3px；padding:0.4em；padding left:1.5em；字体大小：1.4em；高度：18px；}
#可排序li span{位置：绝对；左边距：-1.3em；}
$（函数（）{
$（“#可排序”）.sortable（）；
$（“#可排序”）.disableSelection（）；
});


项目1


项目2


项目3


项目4


项目5


项目6


项目7


$（文档）.ready（函数（）{
//订阅domChanged事件
$（“#可排序”）.bind（'DOMNodeInserted'，function（）{
警报（“Dom已更改”）；
});
//触发domChanged事件
$（document.trigger（'DOMNodeInserted'）；
});

试试这个：

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