divがjqueryの関数に

Question

マイ.popupのdivを聞いていない、このjqueryの機能のおかげでドラッグ可能です：

$(function() 
{ 
    $('.popup').draggable({ 
     drag: function(event, ui) {} 
    }); 
}); 

しかし...ページがロードされると、私は他に.popup div要素を追加divのinnerHTML。このdivはドラッグ可能ではありません。なぜなのかご存知ですか ？

はステファン

、あなたの助けのために

Answer 1

をありがとうしかし...ページがロードされると、私は別のdivのinnerHTMLの中.popup div要素を追加します。このdivはドラッグ可能ではありません。なぜなのかご存知ですか ？

これは、新しいdivがクラスポップアップを追加したとしても、ドラッグ可能な要素に初期化されていないためです。

次のような操作を行うことがあります。

$(function() { 
 
    $('#btn').on('click', function(e) { 
 
    $('div.ui-widget-content:not(.popup)').addClass('popup').draggable({ 
 
     drag: function(event, ui) { 
 
     console.log('2 drag'); 
 
     } 
 
    }); 
 
    }) 
 
    $('.popup').draggable({ 
 
    drag: function(event, ui) { 
 
     console.log('1 drag'); 
 
    } 
 
    }); 
 
});

.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; display: inline; }

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

 

 
<div class="ui-widget-content popup"> 
 
    Drag me around 
 
</div> 
 
<div class="ui-widget-content"> 
 
    Second Drag me around 
 
</div> 
 
<button type="button" id="btn">Add popup class to second div</button>