Question

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

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

但是......一旦页面加载，我在另一个div的innerHTML中添加一个.popup div。这个div不可拖动。你知道为什么吗？

感谢您的帮助，斯蒂芬

Answer 1

但是......一旦加载了页面，我就会在另一个div的innerHTML中添加一个.popup div。这个div不可拖动。你知道为什么吗？

这是因为新的div，即使你添加了类弹出窗口，也没有被初始化为可拖动的元素。

您可以这样做：

＆＃13;

$(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');
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

父的innerHTML中的div没有监听jquery函数

1 个答案: