ДИВ в родительской innerHTML не слушает функции Jquery

Question

Мои .popup дивы являются перетаскиваемым, благодаря этой функции Jquery:

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

НО ... Как только страница загружена, я добавляю .popup DIV в другой div's innerHTML. Этот div не перетаскивается. Ты знаешь почему ?

Спасибо за вашу помощь, Стефан

Answer 1

НО ... Как только страница загружена, я добавляю .popup DIV в innerHTML другого 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>