父母的innerHTML中的div不监听jquery函数

Question

由于这个jquery函数，我的.popup div是可拖动的：

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

但是...加载页面后，我在另一个div的innerHTML中添加了一个.popup div。 该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>